Conditionally Add Components to Enhanced CRM Module

[stjohnson44]

Hi Team. Looking for a way to conditionally add components to the Enhanced CRM Module in a similar way we can add components to the UI directly. Something similar to this:

flex.Actions.addListener("beforeLoadCRMContainerTabs",
					async (payload: any) => {
						const { task } = payload;
						if (!task) {
							return;
						}
						
						payload.components = [
							...payload.components,
							{
								title: "Mosaics",
								order: -1,
								component: <CustomComponent key="CustomComponent" />,
								if: (task) => task.customAttributeHere
							}
						];
					}
				);

The idea being to load the component dynamically based on the if statement, and watching for changes as the flex ui does.

[dremin]

Hi @stjohnson44! You could add an if prop to CRMComponent like you describe. Because the TabbedCRMTask component receives the task as a prop, that means it can re-render when the task changes. Within this component, you can add conditional rendering based on the if prop, which will cause the tabs to dynamically add and remove in response to changes on the task.

[stjohnson44]

Hi @dremin Thanks for the quick response. I have attempted doing what I described above, but when updating the task the component does not mount. Could this be an issue with updating a sub-property, such as task.attributes.customAttribute?

[stjohnson44]

To follow up, this is actually working, however not quite as I would hope. The tab is always being added, but the component itself is being conditionally added. Is there a way to dynamically add the tab itself?

[dremin]

Hi @stjohnson44! Yes, you will need to conditionally render both the Tab and the TabPanel within TabbedCRMTask using the same if condition.