Customizing Smart Table: Overcoming UI Coherence Challenges in Edit Mode

[rubennunes]

In this blog post, I will demonstrate how to insert a custom column in a smart table in a Freestyle SAPUI5 app, ovecoming the display behaviour problems on edit mode. To achieve this, I will use a combination of annotations, as well as certain properties and aggregations of the smartField.

Prerequisites:  Before diving into the customization process, it is assumed that you have set up a CAP project with a Freestyle SAPUI5 application. If you haven’t done so, make sure to have this prerequisite fulfilled to easily proceed with the steps detailed in this tutorial.

Data Model

I have the following data structure:

Two entities are defined: Books and Authors.

We also have the Currencies and Countries entities being imported from ‘@sap/cds-common-content’.

For our table, we will use the Books entity with a custom column pointing to the country property of the Authors entity (through the author navigation property, which is an association to Authors).

View

To achieve this I have created a smart table with a smart field binded to the country_code property of the author navigation property from the Books entity.

<smartTable:SmartTable id="idBooksST" entitySet="Books" tableType="ResponsiveTable" header="{i18n>Books}" enableExport="false"

        editTogglable="true" editToggled="onBooksSTEditToggled" smartFilterId="idBooksSFBar" demandPopin="true" beforeRebindTable="onBeforeRebindTable">

            <smartTable:customToolbar>

                <Toolbar></Toolbar>

            </smartTable:customToolbar>

            <Table id="idBooksTable" itemPress="onPressBook">

                <columns>

                    <Column hAlign="Begin">

                    <customData>

                        <core:CustomData key="p13nData" value='\{"columnKey": "author/country/code", "columnIndex":"4", "type":"String", "sortProperty":"author/country/code", "groupProperty":"author/country/code", "leadingProperty":"author/country/code"}'/>

                    </customData>

                    <Text <Text text="{i18n>Country}"/>

                    </Column>

                </columns>

                <items>

                    <ColumnListItem type="Navigation">

                        <smartField:SmartField value="{author/country_code}" editable="{view>/isBooksTableEditable}" showValueHelp="true"/>

                    </ColumnListItem>

                </items>

            </Table>

        </smartTable:SmartTable>

Through annotations, we added:

• 2 filters to our filter bar (title and price);
• 3 columns to our table (title, descr, and price).
• currency to the price column, through @Measures.IsoCurrency

I also added a Common.Text annotation to use the descr property from Countries entity as text for the code property. So that when I point to the country_code property of the Authors entity I can also get the descr of the country instead of name, the default value.

This is how the table looks at the moment:

What is the issue?

If I switch the table to edit mode, what will happen is that the country field will be displayed differently. It only shows the id, while in display mode shows both the description and the id.

Solution

The solution founded for this issue was to add the textInEditModeSource property of the Smartfield.

<smartField:SmartField value="{author/country_code}" editable="{view>/isBooksTableEditable}" showValueHelp="true" textInEditModeSource="ValueListNoValidation"/>

In this case, I’ve added it with the value ValueListNoValidation but there are other options (see here).

Result:

By default, what was being displayed was the description with the id. However, by adding the configuration aggregation alongside with the displayBehavior property of the Configurarion control from the Smartfield we can change what is shown.

<smartField:SmartField value="{author/country_code}" editable="{view>/isBooksTableEditable}" showValueHelp="true" textInEditModeSource="ValueListNoValidation">
  <smartField:configuration>
    <smartField:Configuration displayBehaviour="descriptionOnly" />  
  </smartField:configuration>
</smartField:SmartField>

In this case, I’ve used the descriptionOnly value but I could have used other options (see here).

Conclusion

When adding a custom column to a smart table, there are some coherence issues in the UI in edit mode. However, these can be easily overcome with a few simple configurations in our XML, allowing our view to have the same appearance at all times.