Smart Table Toolkit

[Allen Yerke]

Irecently have been confronted with those problems binding OData service to a UI5 smart table. I assume in this discussion it's the same with NW service, and there are only a few posts in the web concerning this problem:

There is no description how to get an XSODATA service having those annotations, shouldn't it be generated by default? Are Smart Tables designed only to work with mock server, not with HANA data - I cannot believe this??

The smart table creates a responsive table, grid table, tree table, or analytical table based on an OData (Open Data Protocol) service and its annotations. The table toolbar comes with additional built-in features, such as personalization, export to spreadsheet, and variant management.

Developer HintIf there is no title title, support screen reader users as follows: create a simple table in the XML view, use ariaLabelledBy to point to the corresponding text, and add this table to the smart table. Make sure that the table type within the smart table is set accordingly. The smart table will take care of the rest (creating columns, and so on). Item Counter The item counter is optional and only available if you show a title (property: showRowCount).

The Show Details / Hide Details button is mandatory with and only available for the responsive table. Columns with a low priority (low or medium priority on phones) are hidden in the pop-in area (properties: demandPopin, enableAutoColumnWidth, showDetailsButton, annotation: UI.Importance).

Sorting, filtering, and column settings are automatically available for all columns in all tables. For single columns, you can remove the sort and filter settings (annotations: SortRestrictions, FilterRestrictions).

When amounts with different currencies appear in a single column, you can change the sort behavior to sort these columns first by currency, then by amount (annotation: ApplyMulitUnitBehaviorForSortingAndFiltering). This behavior is applied for all such columns in the smart table. It cannot be defined per column.

Developer HintThe smart table can be linked to a smart filter bar. If linked, the filter bar settings are automatically applied to the smart table (sap.ui.comp.smarttable,SmartTable, property: smartFilterId). Group Group settings are only available for the responsive table (all columns, one level only) and the analytical table (dimension columns only, multiple levels).

Column settings are used to show and hide columns. For the grid table, tree table, and analytical table, the column settings automatically enable resizing via the column header and size-to-fit for text-only columns (double-click on column separator line).

Export to Spreadsheet is optional. The button triggers either a front-end export using the export to spreadsheet utility, or a back-end export via Gateway (properties: useExportToExcel, exportType). The front-end export allows for additional settings and can also be triggered with the shortcut Ctrl+Shift+E.

For larger tables, consider using custom-built, specialized export solutions instead. Maximize / Minimize Maximize / Minimize is optional. It allows users to show the table in full screen mode and to exit full screen mode (property: showFullScreenButton).

Infobar Infobar with filter information The infobar is only available for the responsive table. It indicates which filter settings are currently active. If no filters are set, the infobar is hidden (property: useInfoToolbar, value: Auto).

Developer HintTo change the growing behavior, create a responsive table with just the settings for the growing behavior, and hand it over to the smart table. The smart table then takes care of the rest (such as adding columns, and so on).Developer Hint

While the grid table, analytical table, and tree table support multi-selection by default within the smart table, the responsive table does not offer any kind of selection. The selection mode can be changed. Developer HintTo change the selection mode, add a navigation indicator to single rows, or add a highlight to specific rows, you need to create a table with the corresponding settings. You do not need to define anything else. Hand this table over to the smart table. The smart table then takes care of the rest (such as adding columns, and so on). This method allows you to use the multi-selection plug-in with the grid table, tree table, and analytical table. Column Visibility Columns are created automatically. Items are rendered based on the properties and metadata of the underlying OData service (annotation: LineItem, properties: entitySet, tableBindingPath, initiallyVisibleFields, ignoreFields). A column is generated for each OData entity property. Developer HintIf a column needs to be in the model but should not be shown, you can hide it from both the table and the P13n dialog (property: ignoredFields, annotation: UI.Hidden).

You can use the property requestAtLeastFields to request additional (technical) columns with every request, regardless of whether these columns are currently visible. This does not work with the analytical table.

The property ignoreFromPersonalization is only available with the analytical table. It loads additional key fields that are needed for aggregations but are never visible.Developer HintColumns can be removed at runtime. This is useful if the same table is used for similar, but slightly different objects. For one of the objects, specific columns need to be shown, for others they must be hidden, and users must not be able to add them in the personalization settings (function: deactivateColumn). You can define which columns are initially visible when the app is first launched. All other columns are initially hidden (annotation: PresentationVariant/ LineItem, property: initiallyVisibleFields). Guidelines

If you are using a responsive table, also make sure that the responsive behavior for this column works as expected (sap.m.Column, property: importance). Column Headers You can specify a column header text for each column (annotation: sap:label).SAP S/4HANA Only:

Tooltips are available by default for smart table column headers.

In smart tables, texts that exceed the column width always truncate (see Column Layout). The tooltip allows users to read the full column header text without resizing. GuidelinesProvide a column header text for each column. (annotation: sap:label). The column headers contain the following settings:Sort Ascending, Sort DescendingFilter: Opens the P13n Dialog. If this does not fit for your use case, exchange this menu item (property: enableCustomFilter)Group (only analytical table, only on dimension columns)Total (only analytical table, only on measure columns): This setting is not persisted (annotation: sap:aggregation-role, value: measure).

If a column contains entries with different units of measurement, a Show Details link appears instead of the total. Clicking the link opens a popover showing the subtotals per unit of measurement.Freeze (only available for grid table, tree table, and analytical table): Must be added manually. GuidelinesOffer column totals by default for all columns where totals make sense (annotation: PresentationVariant).Developer HintTo add a Freeze option manually, declare the corresponding table inside the smart table in the XML view, and use the corresponding settings for this inner table. Clicking the column header reveals sort and filter options (responsive table) Column header menu for a dimension column of an analytical table within a smart table Column header menu for a measure column of an analytical table within a smart table Content The smart table offers the following options for creating columns automatically:

Sorting, filtering, and grouping only works for the ID, even if the ID is not displayed.Links with/without quick viewSmart linkSmart linkSemanticObjectSmart links can be customized using the aggregation: semanticObjectControllerDatesTextDate pickerEdm.DateTime, sap:display-format, value: date, IsCalendarDateDates and timesTextDate/time pickerEdm.DateTime, Edm.DateTimeOffsetTimesTextTime pickerEdm.TimeFiscal periodsTextInput fieldIsFiscalYear, IsFiscalPeriod, IsFiscalYearPeriod, IsFiscalQuarter, IsFiscalYearQuarter, IsFiscalWeek, IsFiscalYearWeek, IsDayOfFiscalYearAmounts with currenciesTwo text controlsInput field for the amountsap:semantics, value: currency-codeIn edit mode, the currency is shown as static text next to the input field.Phone numbersLinkInput fieldIsPhoneNumberOpens the system application for making phone calls.EmailLinkInput fieldIsEmailAddressOpens the system application for writing emails.PicturesImageInput fieldIsImageURLOnly available for the responsive table. In edit mode, the input field contains the URL to the image.BooleanTextCheckboxEdm.BooleanFor read-only, the displayed text is Yes or No. In all cases, the smart table automatically takes care of the content alignment and formatting (except for custom columns).

Input fields can be accompanied by a value help dialog (annotation: ValueList). If annotated, triggering the value help button opens a value help dialog. Within this dialog, you can provide a search field (annotation: ValueList, property: SearchSupported).

You can provide additional controls, such as micro charts, rating indicators, progress indicators, and buttons, as custom columns (using an XML view). For custom columns, you must provide any read-only and editable content manually.

The behavior is generally inherited from the underlying table, toolbar, variant management, export to spreadsheet, and P13n dialog (see the corresponding articles for details.) Note that the smart table provides limited options and not all settings of the underlying controls are available.

An empty smart table Errors and Warnings To indicate that the table contains items with errors or warnings, the smart table can show a message strip above the table (aggregation: dataStateIndicator). On the message strip, information about errors or warnings is provided, as well as the possibility to filter down the table to the corresponding rows. When issues are solved or when new issues appear, the message strip is updated accordingly.

3a8082e126