SAP Build Apps - Customize Standard Table Part 1

[keerthanajayathran]

In this blog ,lets create a shopping bag by customizing the standard component ‘Basic table with data adapter’ from the SAP Build marketplace. As you all know, SAP Build is the LCNC offering from SAP.

In Part 1 of this blog we will discuss about how to delete a row from the basic table and refresh the table once it’s done.

To import a basic table , search for table and select ‘Basic table with data adapter’ and install the component.

Standard table structure:

Structure after customization:

Step 1: Add the ‘Delete icon’, on which we will implement the delete logic.
Select the component and click on ‘Open in component template editor’ which will open the skeleton of the component.

Step 2: Go to the component editor and do the below changes:

It will have two parts. One, where the UI changes and integration can be done. Second, is the tree structure of the component where we can add new components and remove the existing ones.
Here we will only change the icon(which will specify the action – Delete in this case) and text color to match the remaining format.
In the properties , click on the icon and select an icon of your choice. In the style tab change the icon color.
You also have to do some adjustments in the padding(under style tab) for better UI like changing the padding of the main container e.g. Row :Odd ,Row: Even and Header row to XXL in the right side to align the newly added items properly.
For changing the properties/style of individual components in the main component, you will have to select the individual component from the tree structure.

        

We have to bind the data to the table . In this blog I have used Visual Cloud Functions which is a backend editor for SAP Build Apps with below fields and functions. Check the SAP Help portal for further information on how to create a project.

Once the backend is deployed , add the integration inside the Data tab in the Build App and click on Add integration.

Click on Cloud functions and add the appropriate one from the list of deployed backend.

You will be able to see screen like below once you select the backend project. In the data entities table , enable the data entity(here it’s already enabled).

Now go back to the UI canvas by clicking on the UI canvas tab. Exit from the template editor if you still on editing mode. Click on the table and in the Properties ,click on Configure Table Resources.
Select the data entity and fields to be displayed in the table from the available fields.

In the Properties tab ,you will see the optional inputs.

You can edit based on your use case. In my case I  have added a filter which will filter the table based on the logged in user , which will enable the user to see the items in his/her cart only.
Select object with properties, click on ‘Add condition’ , I have bound the user to formula : STRING(systemVars.currentUser.email)

Let’s look at the current state in the preview.

Lets now focus on the functionality .

We so far added a delete icon and arranged UI .Now we have to implement the logic to delete the entry from the table.

We have to first delete the entry on click of the delete icon.

Step 3: Select the delete icon, open the logic canvas(you will have to again get in to template editor to do so)

Step 4: Drag and place the Delete Record component to the logic canvas.

Step 5: Select the table resource
Next challenge is to identify which row to delete, for that ,in the identifier formula, use ‘repeated.row’ which will get the current row of delete icon.

This will delete the entry from the table, but it will not be visible until we refresh it manually
Let’s implement a refresh on deleting the entry.

Add a ‘Receive Event’ and connect it to the ‘Get record collection’. Click on the Event and select the event source as ‘Internal Property ‘items’ changed’.

What have we achieved?

We have created a table which allows to delete a row and refresh the table to show the changes. This feature enhances user experience by allowing immediate visualization of data changes, ensuring the table always reflects the current state without manual refreshes.

In the next part of this blog we will discuss about how to add image and also on updating the quantity.

[Dan_Wroblewski]

It is really nice blog, and good to learn about customizing components, and specifically how the table component works.

But I think this is generally too complicated to be worthwhile for most developers of any type using this no-code SAP Build Apps. Strangely, the thing that annoys me the most is that you have to create the delete icon and logic twice (though you can simplify it with custom events). I personally think at this point it is best to create your own table control, which is pretty easy using containers and styling. I believe soon SAP Build Apps will provide templates for such things.

See this Devtoberfest session:

[keerthanajayathran]

Thanks for the info @Dan_Wroblewski 

[VaibhavS]

Well explained keerthana. Can you update us when the new blog is coming out for this series?