Sample application

The following shows an example of how to create an application that lets the end-users view, add, and delete records from a table in a base. The end-users can edit the records collaboratively so that when one end-user deletes a record, another end-user immediately sees the change after refreshing their browser.

The example procedure consists of these main steps:

1. Set up a base and a table

2. Set up basic table operations

3. Create the UI

   • Set up the record component group
   • Set up the delete-record feature
   • Create bindings for the record group
   • Add a title, scrollbar, and the New button
   • Create the UI to add a record
   • Create a binding the New button
   • Add finishing touches

Set up a base and a table

1. On an empty sheet, in cell B2, enter a base name.

2. Create a base using the address of the base-name cell as the argument:

   =?BASE_ADD(B2)

   

3. In cell B6, enter a table name.

4. Add the following table definition into the cell range B7:C9:

   	A	B	C
   1	first_name	string
   2	last_name	string
   3	age	number
   4

5. In cell A1, use the following formula to create a table.

   =?TABLE_SPEC(B2,B6,B7:C9)

   

Set up basic table operations

1. In the range B13:D14, enter data to add to the table:

   	A	B	C
   1	first_name	last_name	age
   2	John	Doe	25
   3

2. In cell B15, create a frame using the range with data as the argument:

   =FRAME(B13:D14)

   

3. In cell B16, use the following formula to add records to the table:

   =?ADD_RECORDS(B2,B6,B15)

   

4. In cell D16, use the following formula to display all records.

   =?GET_RECORDS(B2,B6)

   

Create the UI

Set up the Record component group

1. Add to the page three Text components to display records and an Icon component to delete a record.

2. Change the default icon to a trash-bin icon.

3. Lay the components out in a row and group them.

4. Rename the box to "Record".

5. Adjust the layout as shown in the video above.

Set up the delete-record feature

To delete a record from a table, you need to execute a sequence of operations using the DO() function:

1. Follow these steps to create your logic for deleting a person record from the base:

   • In cell B20, use the following formula to return User Interaction event information in the form of a frame.
     =?E()

     
   • In cell B21, use the following formula to get the index of the repeated Record box whose child trash-bin icon is clicked.
     =?GRAB(B20,"$..repeated_item_index")

     
   • In cell B22, use the below formula to get the record at the clicked index.
     =?ROW_AT(D16,B21)

     
   • In cell B23, use the below formula to retrieve the _id value of the record:
     =?GRAB(B22,"$.._id")

     
   • In cell B24, use the below formula to delete the record from the table using the retrieved record ID.
     =?DELETE_RECORDS_BY_ID(B2,B6,B23)

     
   • In cell B25, use the DO() function to re-evaluate the cell that returns all records from the table.
     =?DO(D16)

     

2. In cell B19, use the DO() function that references the range defined in step 1.

   =?DO(B20:B25)

   

Create bindings for the Record group

1. Select the Record box, and then, in the Box properties panel, click on Repeater and bind the Based On Spreadsheet property it to the topmost cell of the id column of the frame that is returned by cell D16. Set vertical direction for auto-propagate.

2. Bind the text value properties of each Text component in the Record box to the respective columns of the frame that is returned by cell D16.

3. Bind the onClick event of the trash-bin icon to cell B19. While binding, make sure that the cell value is fixed in both directions so that when the end-user clicks on any trash-bin icon in the repeated group, the same cell (B19) gets executed, deleting the respective record from the base table.

4. Click on the Preview button to enable the preview mode and make sure that records are added and deleted on the page.

Add a title, vertical scrollbar, and the New button

To add a vertical scrollbar to the displayed records:

1. Right-click the Record box, and then select Group. A new box component appears in the outline as a parent of the Record box.

2. Select the parent box component, and then, above Overflow-Y, click on the Auto button

To add a title to the UI section, add a Text component to the page and, in the Text value property field, type "Employees".

To add the New button:

1. Add a Button component to the page.
2. Set the button's Caption property to New.
3. Change the background and font color, as shown in the video above.

Create the UI to add a record

1. Add a new page and rename it to "Add Person Dialog", as shown in the below video:

   

   This page will be used as an overlay on "Page 1"

2. Set up the Add Person Dialog page, as shown in the video below or described in the procedure under the video.

   
   • In the Add Person Dialog properties panel, select Close overlay on ESC when open and select Closes the overlay, deselect Sends event to pages below
   • Set the background color to black and reduce the Opacity to 0.4

3. Add a group of TextInput components, as shown in the video below or described in the procedure under the video.

   
   • Add to the Add Person Dialog page three TextInput components for first_name, last_name, and age.
   • Group the TextInput components.

4. Set placeholders, add the Add button, and create bindings, as shown in the video below or described in the procedure under the video.

   
   • Change the Placeholder values of the TextInput components to "First name", "Last name", "Age".
   • Add to the page a Button component, change its caption and background, as shown in the video above.
   • Bind the onClick event of the Add button to cell B16 (the cell that contains the ADD_RECORDS function).
   • Bind the TextInput components for "First name", "Last name", and "Age" to cells B14, C14, and D14.
   • Test the functionality by adding a record and making sure it is displayed, as shown in the video above.

Create a binding for the New button

Configure the New button to display the Add Person Dialog page as an overlay, as shown in this video or described in the procedure under the video.

To configure the New button to show the Add Person Dialog page as an overlay:

1. In cell B28, use the following formula to show the Add Person Dialog page as an overlay.

   =?SHOW_OVERLAY("Add Person Dialog")

   

2. Bind the onClick event of the New button to cell B28.

3. Click the Preview button and make sure it works as expected.

4. Adjust the position of the overlayed dialog. Make sure the Add button is grouped into the box.

Add finishing touches

Enhance the Add button functionality

Let's enhance the functionality of the Add button so that when the end-user clicks, it the following operations occur:

1. The record is added to the table.
2. The list of records is refreshed.
3. The Add Person Dialog page gets hidden.

To implement the above-mentioned enhancements, follow the steps in the video below or the procedure provided under the video.

1. In cell D20, use the following formula to add the record to the table.
   =DO(B16)

   
2. In cell D21, use the following formula to get the list of records in the table.
   =?DO(D16)

   
3. In cell D22, use the following formula to hide all overlays:
   =?HIDE_ALL_OVERLAYS()

   
4. In cell D19, use the following formula to execute the cell range D20:D22:
   =DO(D20:D22)

   

Add highlight to records

Add highlight to the records in the UI when they are hovered over, as shown in the video below or described in the procedure under the video.

1. Select the Record box, and then, in the Box properties panel, select Hover.
2. Enable Hover Styles.
3. In the Background area, above Color, select a highlight color you want to use to highlight a record when it is hovered over.
4. Make sure the highlight on hover works as expected.