In this CRM, each account will have its list of contacts. To add this concept to the application’s data model, right-click on the fields folder of the Account aggregate and select “add field.” Since each account can have more than one contact, write the field's name in its plural form and check “is collection.” From the Type drop-down list, pick “new entity” and write the singular form for the entity’s name, as it represents one item from the collection.
.png "image(49).png")
To define the fields for each contact, open the entity in the data model, right-click its fields folder and select “add field.” Repeat the process until all necessary fields have been added.
.gif "image019(3).gif")
Once done, right-click on the commands folder of the Account aggregate and select “add entity create command.” Using our wizard, go through the 2-step process of command creation. For our example, the container field name is “contacts.” The command name “addContact,” as well as the label field and event type, are all automatically filled. Add the first and last name fields as well as phone number to the parameters of the command and pick the required fields as needed.
.gif "image020(2).gif")
Important: An entity's “update” and “delete” commands must be created from the commands folder located in the entity itself.
The creation process, however, remains the same. Right-click on the commands folder and complete the 2-step process using the wizard for the update command. The delete command creation process is even more straightforward. After selecting the option to add a delete command, all that is left to do is to save to confirm the creation.
.gif "image021(3).gif")
Test the entity’s commands.
Add a new tab to the Account's detail page to test the commands of the newly created contacts entity. To do so, click on the + symbol next to the “details” tab, which is only visible while using the page designer mode. For our example, name the tab “Contacts” and delete the placeholders by selecting them in the UI and using the delete button on a keyboard. Then, drag and drop the “addContact” command to the page content and select the button component. Go Live to test this Create command and add at least two contacts under the account; this will be useful when we try the edit and delete commands of the contact entity. However, the contact’s data won’t be visible at this point.
.gif "image022(2).gif")
To display the created contacts, drag and drop the entity to the page content under the Add Contact button and select the repeater option. The default repeater layout is a series of cards; however, repeaters can easily be changed to achieve a completely different aesthetic. To learn more about this option's full potential, look at the user guide on Repeaters.
.gif "image023(2).gif")
When placing an edit and delete command for an entity, they must be dropped in the first box inside the repeater’s structure. This allows the system to know which data from the repeater needs to be edited or deleted. In this example, the editContact command is displayed as a toolbar button, with the “edit” icon and no label. This creates an icon automatically associated with the command. Go Live to test the command.
As for the delete command, after adding it to the repeater, the “button” component was used instead of the “toolbar button” option to only get a label. To create space between the last contact field and the delete button, add 8px of top margin to the button through the Style tab of the Component Panel.
