How to make a contract with a `multiple` attribute

Learn how to make a contract with a multiple attribute.

Difficulty: intermediate
Estimated time: 20 minutes

With Bonita, in the BDM (Business Data Model), you can create an object with a relationship with another object. For example, a Provider object may have a relationship with a Contact object. Then, you can create a Process contract with a contact attribute set as multiple, to specify that you may have several contacts for a provider.

To start a Process Instance, the UI should allow users to create a new provider and add multiple contacts. In this guide, we will focus on how to create a list of contacts, and store them in a JSON object. This will be used to fill the contact attribute in the contract.

Create a JS Object to manage the list of contacts

Go to the JS tab and create a new JS Object called ContactsHandler and copy and paste the following code:

export default {
	contacts: [{id: 0, title: "Mr", firstname: "Alejandro", surname: "Dupont", email: "alejandro@dupont.com", contactType: "technical"}],
	maxId: 1,
	getAll () {
		return this.contacts;
	},
	add(contactToAdd) {
		if (!contactToAdd) {
			showAlert("Invalid contact!");
			return;
		}
		contactToAdd.id = this.maxId++;
		this.contacts.push(contactToAdd);
		this.getAll();
	},
	delete(idToDelete) {
		if (idToDelete === undefined) {
			showAlert("Invalid id!");
			return;
		}
		this.contacts = this.contacts.filter(contact => {
			return contact.id !== idToDelete;
		});
		this.getAll();
	},
	update(contactToUpdate) {
		  const index = this.contacts.findIndex(contact => contact.id === contactToUpdate.id);
		if (index === -1) {
			showAlert("contact not found! id=", contactToUpdate.id);
			return;
		}
		this.contacts[index] = contactToUpdate;
		this.getAll();
	}
}

This simple code allows to create, update and delete contacts.

Now, from the Settings tab, enable Run on page load for the getAll function.

Create a UI to manage the list of contacts

Drop a Table widget on the page
Set the Table data property as JS and as {{ContactsHandler.getAll.data}}
For the Columns, check the Editable property, and uncheck the id column, since it is automatically generated

Enable adding a row

In the Adding a row section:
- enable the Allow adding a row property
- Set the onSave property to Execute a JS function → ContactsHandler.add(data) with {{Table1.newRow}} parameter:

adding-a-row-on-save

From the Columns section, click on the Save / Discard spin wheel icon to edit the column properties
Set the onSave property as JS and as {{ContactsHandler.update(Table1.updatedRow)}} :

table-save-discard-column

Set the Title column type as Select and set the Options property as:

[{"label": "Mrs", "value": "Mrs"}, {"label": "Mr", "value": "Mr"}]

Set the ContactType column type as Select and set the Options property as:

[{"label": "Administration", "value": "administration"}, {"label": "Technical", "value": "technical"}, {"label": "Other", "value": "other"}]

Add a button to delete a row

Add a delete column to the table
Edit the column properties:
- Set the Column type as Icon button
- Set the Icon property as delete icon
- Set the onClick property to Execute a JS function → ContactsHandler.delete with {{Table1.triggeredRow.id}} parameter
- You may also want to set the icon color as red, from the Style tab

You can now play with your UI by adding, updating and deleting contacts!

How to make a contract with a multiple attribute

Create a JS Object to manage the list of contacts

Create a UI to manage the list of contacts

Enable adding a row

Add a button to delete a row

How to make a contract with a `multiple` attribute