How to extend smart template based List reports

Creating UI applications using smart templates is very easy. However, every ‘easy task’ comes with its own restrictions.

In my project, our need was to extend the smart template with additional functions (custom actions). After some research, I figured out how to extend the application to add custom actions.

Add Custom Actions:

To Add the Custom action to the annotation based list report modify the manifest.json  add the below code snippet and in extended controller file write the js function that is mentioned for press action “onDataExport.

Please note that if “RequiredSelection” is true than it will enable radio/check box at the beginning of each line item for multiselect or for single select so if you don’t want radio/check box selection for the line items then set the “RequiredSelection” as false as shown in below screen shot.

if you run the app , it will look something like this:

UI annotations in list report:

You can use annotations to set up various elements that are common to the list report and the object page, such as status colors and navigation.

There are 3 basic UI annotations:

• UI.HeaderInfo – for table header
• UI.SelectionFields – for filter bar
• UI.LineItem – for table content

UI.HeaderInfo Annotation:

To show the line item count on  the top of the list report  add the header info annotation to the annotation.xml as shown below .

in the code editor , the headerinfo annotation like like

UI.SelectionFields Annotation:

To add the fields to the filter bar in the UI.SelectionFields annotations.  We use the SelectionFields dropdown to select attributes from EntitySet.

in the code editor , the line SelectionField annotation like like

if you run the app , it will look something like this:

UI.LineItem Annotations:

UI.lineItem annotation represent an ordered collection of data fields that is used to represent data from multiple data instances .

There are different types of columns we can use – text, numbers, date/time, amount with currency, quantity with unit, urls, buttons, rating stars, progress bars, etc. in our below example we have used basic types of columns like texts , numbers , data, times

in the code editor , the line item annotation like .

if you run the app , it will look something like this:

Disabling navigation to detail page:

To disable the page navigation to next screen on click of the list report please remove child pages as shown in the below screen.