Manage a many-to-many relationship with a Chip group
Last updated
Last updated
There are a number of ways to manage a many-to-many relationship in an app's user interface. This guide describes one possible approach, using the Chip group UI component and one action to create, display, and delete objects in a many-to-many data source.
To learn the fundamentals about many-to-many relationships in Appfarm Create see how to manage many-to-many relationships in your data model. This guide uses the examples presented there, with three data sources: Employee, Skill and Employee Skill based on object classes of the same name. The steps here use database connected data sources to reduce complexity. If you are using runtime data sources you will need to make the necessary adjustments.
The easiest way to work with objects in a many-to-many data source is when you are in the context of one of the objects you wish to relate. For example, to create an Employee Skill object you might add and remove skills on an employee details page so that you're working in the context of a specific Employee.
The following steps will display a list of items (chips) using a Chip group and create a many-to-many relationship when a chip is clicked.
In the context of an object you wish to relate, for example on a page that displays the details of one individual Employee, add a Chip group UI component. Set the following properties:
Data Source: Select the data source that contains the other objects you wish to relate, for example Skill.
Label: Select the object class property the contains a textual representation of the object, for example Skill.Name.
This will display a list of chips, with each chip representing an object in the chosen data source. Continuing the example, it would be a list of possible skills that an employee can have.
This step will create a new object in the many-to-many data source when you click on a chip, creating a relationship between the two other data sources.
Click the On Click event handler in the Chip group properties.
Click Create New Action and enter a name for the action, for example Edit employee skill (you'll expand this action further later).
Add a Create object action node.
In the Create object action node, set the following properties:
Data Source: Select the many-to-many data source, for example Employee Skill.
Values on create: For each reference property, select the data source that contains the object in context. For example, Employee and Skill.
Now, when you click on a chip, a new object will be created in the many-to-many data source (Employee Skill) with references to both of the other data sources (Employee and Skill).
To highlight which relationships exist, for example which Skills are associated with an Employee, you can use the Chip group's conditional properties. A conditional property is a rule that determines if one or more component properties should be overridden. In this case, we'll use a conditional property to change the color of a chip.
In the Chip group's component properties click the + sign under Conditional Properties. Set the following properties:
Name: Set a name to describe the rule, for example Skill added.
Enabled: Create a condition to check if the object exists in a filtered selection of the many-to-many data source. For example, Skill.ID EXISTS IN Employee Skill (Filtered).Skill where the filter is Employee Skill.Employee EQUALS Employee (Selected).
Property Overrides: Select Color and then select either Primary or Secondary.
Now, if you have clicked on a chip and an object was created in the many-to-many data source, it will be displayed in a different color to the others which have not been added. You can adjust the colors, either in the conditional property or the app's theme to best highlight which items are active.
Deleting an object from a many-to-many data source is the same as from any other data source. If you've followed the steps above, clicking on the same chip twice adds multiple objects which is not ideal. To avoid this you can add a check to the action that is triggered on-click and check if the object already exists. If it does exist, instead of adding it again you can delete it.
In the action node that is triggered by the On Click event handler of the Chip group:
Add an If action node.
Drag the new action node above the Create object action node so it is run first.
Set the Condition property to check if the object exists in a filtered selection of the many-to-many data source. (You can copy and paste the condition used to create the conditional property earlier in the guide.)
Inside the If action node, add a Delete objects action node. Set the following properties:
Data Source: Select the many-to-many data source, for example Employee Skill.
Selection: Select Filtered selection.
Filter: Create a filter to select the object that matches the two objects in context. For example, Employee Skill.Employee EQUALS Employee (Context/Selected) AND Employee Skill.Skill EQUALS Skill (Context/Selected).
Inside the If action node, under the Delete objects action node, add an End execution action node. This will end the action immediately so as not to run the Create objects action node.
Now, if you click on chip that has already been clicked (and the conditional property has given it a new color), the object will be deleted from the many-to-many data source. The chip's color will return to it's default, unselected color.
You should now have a complete UI with logic for creating, displaying, and deleting objects in a many-to-many data source.
