- SAP Managed Tags:
This blog post details the latest in my 100-day low-code, no-code journey, and hopefully provides some tips and tricks for you.
In the last post, I described the ins and outs of working with a REST API. In the current post, I'll describe how how to work with components, the main building blocks of the UI, and even how to create your own.
Most of the magic of building UIs with AppGyver is about binding these properties to a variable or formula so the property is dynamic and responds to live data or user action.
For example, I created a stopwatch with just 2 buttons, and a text field whose content was bound to a formula that calculated dynamically the current time with the help of some variables. That was it.
AppGyver guides you by checking the data type of the setting with the data type of the value you want to set, and not letting you do something that doesn't fit.
You can bind a value to the following (not all may be available for all setting):
A common UI pattern is to display a list of data, whose length is unknown. Therefore, many components have a Repeat property that can be set to a list. The UI will then display that component as many times as there are items in the list.
Here, I have a list component to show players on a specific team, so I bind the repeat to the data variable holding the list of players.
You must then decide what actual data to display in the repeated component, and that's when you select Data item in repeat (or the data item in the list used for the repeat).
For my list item, I bound the value of the primary label to a specific field of my repeat list (
Click on Component Marketplace, search for components, and install the ones you like.
These components now appear in the Installed tab.
For example, I installed the Date field (picker) component, which appears in the Installed tab. (If you want, you can duplicate the component and work with your own version of the component and leave the original alone.)
I added the component to the canvas, and then in the Properties pane, at the bottom, there is a button to open the component editor.
This will show you the inside of the component, what subcomponents there are and what logic there is. Here you can see the logic can be pretty complex.
But the main point here is that you can modify these components, tweak them, and make your own versions of them.
There are 2 ways to open up a composite component:
You can take a container object and whatever other components you want, and style them as you want. You can add logic to them as well.
In addition, you can define your own properties so people who use your component can set them. Or define your own events and trigger them based on your logic and then people who use your component can capture them and handle them as needed.
It's all relatively easy, but I'll leave it at that for now. Sometime soon, I will provide an example of how to create a composite component.
You can go all-in on all the low-code, no-code tools and take the 18-hour, 8-unit low-code, no-code learning journey (SAP AppGyver, SAP Process Automation, SAP Work Zone) – and it includes a certification exam, if you are interested (fee) – which is part of the new SAP Learning.
In the last post, I described the ins and outs of working with a REST API. In the current post, I'll describe how how to work with components, the main building blocks of the UI, and even how to create your own.
| Day 9 - Components |
- Core: Basic components (e.g., text, input field, button).
- By Me: Components you create yourself, or existing composite components that you modify for yourself. More on this later.
- Installed: More complex components that you install in your AppGyver. To get such components, you click Component Marketplace to select additional components. (Note that the marketplace, for now, is made up of components created by SAP. So basically core and installed are together one big group of out-of-the-box components.)
- Properties: Key component settings related to the particular component, for example, a text component will have a property for the text to display.
- Style: Settings for how the component should look (e.g., font and color)
- Layout: The size of the component and its spacing, especially in relation to other components on the canvas.
Binding
Most of the magic of building UIs with AppGyver is about binding these properties to a variable or formula so the property is dynamic and responds to live data or user action.
For example, I created a stopwatch with just 2 buttons, and a text field whose content was bound to a formula that calculated dynamically the current time with the help of some variables. That was it.
AppGyver guides you by checking the data type of the setting with the data type of the value you want to set, and not letting you do something that doesn't fit.
You can bind a value to the following (not all may be available for all setting):
- Static value: Fixed value you type in
- Data and Variables: The value of a specific value (whose value will be set by API calls or other backend logic)
- Formula: A formula like in Excel where you can take variables, data, and other values and mash them up with the help of functions.
- Component properties: Properties from the current component or other components.
- Data item in repeat: See the next section.
Repeat
A common UI pattern is to display a list of data, whose length is unknown. Therefore, many components have a Repeat property that can be set to a list. The UI will then display that component as many times as there are items in the list.
Here, I have a list component to show players on a specific team, so I bind the repeat to the data variable holding the list of players.
You must then decide what actual data to display in the repeated component, and that's when you select Data item in repeat (or the data item in the list used for the repeat).
For my list item, I bound the value of the primary label to a specific field of my repeat list (
name_last_first).| Day 10 - Installed components |
- Embedded Map View
- WebView
- Image lists
- ... and all kinds of UI components like combo boxes, checkboxes and the like.
Click on Component Marketplace, search for components, and install the ones you like.
These components now appear in the Installed tab.
| Day 11 - Composite components |
For example, I installed the Date field (picker) component, which appears in the Installed tab. (If you want, you can duplicate the component and work with your own version of the component and leave the original alone.)
I added the component to the canvas, and then in the Properties pane, at the bottom, there is a button to open the component editor.
This will show you the inside of the component, what subcomponents there are and what logic there is. Here you can see the logic can be pretty complex.
But the main point here is that you can modify these components, tweak them, and make your own versions of them.
| Day 12 - Your own composite components |
There are 2 ways to open up a composite component:
- Double-click: This only opens up the local copy you dragged in, and only lets you change the configuration (i.e., style, layout) for that copy.
- Opening in editor: Using the button in the Properties tab, this opens the component that is in your palette (on the left) and affects the component every time you drag it into a canvas. Again, you can create a copy and work only on that copy.
You can take a container object and whatever other components you want, and style them as you want. You can add logic to them as well.
In addition, you can define your own properties so people who use your component can set them. Or define your own events and trigger them based on your logic and then people who use your component can capture them and handle them as needed.
It's all relatively easy, but I'll leave it at that for now. Sometime soon, I will provide an example of how to create a composite component.
You can go all-in on all the low-code, no-code tools and take the 18-hour, 8-unit low-code, no-code learning journey (SAP AppGyver, SAP Process Automation, SAP Work Zone) – and it includes a certification exam, if you are interested (fee) – which is part of the new SAP Learning.
