3. Add manifest parameters

Add manifest parameters

Manifest parameters provide dynamic values for card attributes. They are replaced during manifest processing and can be used with the double-bracket syntax like: {{parameters.title}}. As an example, in this step you will add parameters to set the header (title and subTitle) properties and the number (maxItems) of displayed items in the content.

If you are following this guide as part of a workshop and run out of time, you can skip this module and create a simpler card.

To define parameters - add the following parameters subsection in the manifest.json in the configuration section (note the comma which divides the entries).

Note: Be careful to find the place where the code snippet should be located as indicated by the arrows.

Code Snippet

123456789101112
,
         "parameters": {
             "title" : {
                 "value": "List Card with Latest {{parameters.maxItems}} Sales Orders"
             },
             "subTitle": {
                 "value": "These are the Latest Sales Orders"
             },
             "maxItems": {
                 "value": 4
                     }
                  }

To use the new maxItems parameter, replace the maxItems: 5 static value in the content section with the (maxItems) parameter as shown below:
Code Snippet
```
1
"maxItems": "{{parameters.maxItems}}"
```

Let’s also use the new parameters in the header section. Use the double-bracket syntax and edit (or replace) the header, so it looks like this:

Code Snippet

12345678910
"header": {
         "title": "{{parameters.title}}",
         "subTitle": "{{parameters.subTitle}}",
         "icon": {
             "src": "sap-icon://desktop-mobile"
         },
         "status": {
             "text": "{{parameters.maxItems}} of 20"
         }
     },

Results after the above changes:

In this step you have learned how to declare configurable parameters and use them to achieve desired dynamic behavior. The application now displays a list of 4 items according to the parameters property (maxItems value: 4).

To learn more, see the Manifest Parameters section in the Card Explorer.

Next lesson