Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Create a many-to-many relationship using a Chip group
  • Step 1: Populate the Chip group
  • Step 2: Create an object in the many-to-many data source
  • Display a many-to-many relationship using a Chip group
  • Step 1: Add a conditional property
  • Delete a many-to-many relationship
  • Step 1: Add an If action node
  • Step 2: Add a Delete objects action node
  • Step 3: Add an End execution action node

Was this helpful?

Export as PDF
  1. How to
  2. User interface

Manage a many-to-many relationship with a Chip group

PreviousUser interfaceNextConfigure drag and drop

Last updated 1 year ago

Was this helpful?

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 and one 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 . 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 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.

Create a many-to-many relationship using a Chip group

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.

Step 1: Populate the Chip group

  • 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.

Step 2: Create an object in the many-to-many data source

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).

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).

Display a many-to-many relationship using a Chip group

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.

Step 1: Add a conditional property

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.

Delete a many-to-many relationship

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.

Step 1: Add an If action node

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.)

Step 2: Add a Delete objects action node

  • 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).

Step 3: Add an End execution action node

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.

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 . Set the following properties:

Add a .

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 to best highlight which items are active.

Inside the If action node, add a . Set the following properties:

Chip group UI component
Create object action node
theme
Delete objects action node
Chip group UI component
action
how to manage many-to-many relationships in your data model
database connected data sources
An example of a many-to-many relationship represented in an app using a Chip group.