Example: styling views

This example shows how to style individual views to change their appearance depending on whether users are viewing them on a web page or on a mobile device.

This example contains two sets of the same UI views that demonstrate how you can style the same view to appear different. In the first set, some of the style configurations optimize the views for a web page. Some of the style configurations made to the second set optimize them for a mobile device, such as a smartphone.

The style configurations in the example use definitions in the Classic theme. These definitions control the look of any views that are using the theme. If your views are using a different theme, they could look different depending on the differences between the two themes.

  1. Open Process Designer and create a view, then add the following UI views to it:
    • Text
    • Check Box
    • Button
    • Text
    • Switch
    • Button
    The view looks like this:
    Screen capture showing the listed views arranged vertically. The second set of views have the number 2 appended to their label.
  2. Select the first Text view. In its Appearance configuration properties, set the text size to Small. While the default size of Medium is fine, the smaller text lets you have more text on screen while preserving space. When you make the change, the label text shrinks. If you added placeholder text, the text inside the Text view also shrinks. In addition to changing the text size, the padding around the view changes as well. You can see the difference between small and medium text by looking at the two Text views in the layout.
  3. Make the same changes to the first button, changing the size of the text to Small.
  4. Select the second Text view. In its configuration properties, expand the Style section and change the text size to Large. The larger text is easier to read on smartphones. However, you can use large text in a web page and small text in a smartphone if that is what your layout design requires.
    The first text view has a smaller label than the second text view. The second Text view has a larger label and placeholder text than the first view.
  5. Select the Switch view. In its configuration properties, expand the Style section and change the text size to Large.
  6. The Switch view uses a color to indicate which part is selected. By default, this is the Primary color, which the Classic theme defines as a dark blue. Change the Switch on color property to Info to change it to the information color, which the Classic theme defines as a light blue. In this case, this is only an aesthetic choice. However, you could choose to color the view based on the purpose of the view as an Info view, Success view, Warning view, or an Danger view.
  7. Select the second Button view. In its configuration properties, expand the Style section and change the text size to Large and set the theme color type to Success. In the layout, the view looks like this:
    The second set of views have larger text, the switch is light blue, and the second button is green in color.
This example used two different sets of views to demonstrate how setting the style on one button instance does not affect the other instance. However, if you were creating this view as a UI that could be used in a desktop browser and in a mobile application, you could use just one set of views. In this case, set the layout to the large screen size "Large screen" and then set the text size for the views to be small. Then you would set the layout to the small screen size "Small screen" and set the text size for the views to be large. Note that the color configuration options do not change when the screen size changes. That is, a button with the success color is that color for all screen sizes. The following screen captures show the one set of views that change according to the screen size:
Table 1. Views on different screen sizes
Large screen size Small screen size
The views in a wide browser, with small text.
The views in a narrow browser, with large text.