- 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.
This blog post focuses on managing the look and feel of AppGyver apps – UX is not my strong suit but I'll give it a try 😳. When it comes to look and feel, AppGyver provides 2 sets of features:
You can see these features reflected in the tabs next to the Properties tab when configuring a component or page.
For the basics, you add components to a container, setting whether you want the components aligned horizontal or vertically, then setting the spacing/padding settings for the components and the width/alignment inside the container.
For example, I wanted to have a set of filters in a row.
So I created a container and added to it text and checkbox elements. I set the alignment of the container to horizontal. You can also set the "gaps" or spacing on all sides.
Then on each component, I can set the spacing on the sides until I get the horizontal spacing I want.
So as I often do, I created a graphic (still a work in progress) to show all the pieces and how they relate to each other.
This is a collection of the following:
Each component comes with a set of predefined styles, and each style has a set of properties for that component (e.g., font, color, shadow, spacing). You choose the style when you add a component. More on this tomorrow (below).
The theme variables determine the values available for various properties within the styles.
For example, take the shadow values for the button:
These are determined by the theme variables:
You can change the value for these options (via the bindings) or you can add a new variable for the Shadow category.
OK, back to styles, since this is where the real formatting is done.
Each component comes with a set of predefined styles that you can choose from (one of which is the default). You can change these predefined styles ("Overwrite") or create your own ("New Style") or just make local changes for a specific component instance without saving the changes globally.
For example, when you add a button, you get a set of predefined styles, which the Primary Button style selected (default).
You can then:
For example, I want to change the color of the button and make this color scheme standard. So I edit the style:
I then change the color, and click Overwrite. Notice before I click Overwrite the 2 buttons have different styles. But after overwriting, the bottom button color (set to the same primary style) will also change.
For many of the properties in a style, you can simply enter a color or size in pixels, or otherwise manually set the property. But many of the choices are defined by the theme variables.
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.
This blog post focuses on managing the look and feel of AppGyver apps – UX is not my strong suit but I'll give it a try 😳. When it comes to look and feel, AppGyver provides 2 sets of features:
- Layout: This handles the positioning of components on the page, including spacing and orientation.
- Styles: This handles the look and feel of individual components, like the color of a button or the font for a text component.
You can see these features reflected in the tabs next to the Properties tab when configuring a component or page.
| Day 24 - Basic layouting |
For the basics, you add components to a container, setting whether you want the components aligned horizontal or vertically, then setting the spacing/padding settings for the components and the width/alignment inside the container.
For example, I wanted to have a set of filters in a row.
So I created a container and added to it text and checkbox elements. I set the alignment of the container to horizontal. You can also set the "gaps" or spacing on all sides.
Then on each component, I can set the spacing on the sides until I get the horizontal spacing I want.
A few tips
- If you want to use the scrollview, you have enable these settings on the page.
- An example of something cool, I wanted to create a button at the top, a button at the bottom, and a scrollview in the middle.
- All in all, the layouts (and styles) feature is a whole world unto itself. You can read more about it in the reference guide. You can also check out the Curiosity Labs YouTube channel where Ohno built a few simple AppGyver apps but spends A LOT of time getting the apps to look pixel-perfect.
- Also check out Harri Sarsa's blog on styles.
| Day 25- Styles, themes and smart colors |
So as I often do, I created a graphic (still a work in progress) to show all the pieces and how they relate to each other.
Themes
This is a collection of the following:
- Smart Colors: A set of background colors, each mapped to a set of secondary colors. Each secondary color suggests a semantic meaning ("warning" or "primary") but you do not have to use it this way. The idea is that when you change the background color, the secondary color automatically changes to the proper color for the new background.
- Fonts: You can upload your own fonts, and then with variables set the default "primary" or "monospaced" or whatever semantic font for your app. When selecting a font, you select the semantic font, not the actual font.
- Variables: These seem to hook everything together. These determine the available values for the various property types, like determines the sizes of shadows you can select or the available paddings. These can still often (always?) be overridden.
Styles
Each component comes with a set of predefined styles, and each style has a set of properties for that component (e.g., font, color, shadow, spacing). You choose the style when you add a component. More on this tomorrow (below).
Variables
The theme variables determine the values available for various properties within the styles.
For example, take the shadow values for the button:
These are determined by the theme variables:
You can change the value for these options (via the bindings) or you can add a new variable for the Shadow category.
| Day 26 - Changing styles |
OK, back to styles, since this is where the real formatting is done.
Each component comes with a set of predefined styles that you can choose from (one of which is the default). You can change these predefined styles ("Overwrite") or create your own ("New Style") or just make local changes for a specific component instance without saving the changes globally.
For example, when you add a button, you get a set of predefined styles, which the Primary Button style selected (default).
You can then:
- Edit the current style and make changes locally.
- Edit the current style and make changes and save these to the style so it affects all other buttons with this style.
- Edit the current style and make changes and save these to a new style.
For example, I want to change the color of the button and make this color scheme standard. So I edit the style:
I then change the color, and click Overwrite. Notice before I click Overwrite the 2 buttons have different styles. But after overwriting, the bottom button color (set to the same primary style) will also change.
For many of the properties in a style, you can simply enter a color or size in pixels, or otherwise manually set the property. But many of the choices are defined by the theme variables.
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.
1 Comment
