Altering the appearance of an App Studio Component

The App Studio allows you to apply extensive styling capabilities on components. 

This eliminates the need for familiarity with CSS-styling and front-end development.

As an App developer, you configure the appearance of App Studio Components.

For a full list of App Studio Components see: Introducing App Studio.

To change the appearance of a Component:

1. From the Appearance and Configuration panel, select Appearance.
2. Modify the settings as you require.

Some Components have appearance settings that only apply to their type of Component.  The following appearance settings apply to most App Studio Components:

Appearance setting	Description
Size & position	X and Y coordinates—relative to their parent container W and H—Width and Height positions
Visible	Specifies the visibility of a Component. Use a moustache statement to evaluate a Component's visibility that uses the current value of a Data Set.
Background	Specifies the color of the Component background.  Use the color-picker to select a color, or provide Hex, or RGBA values.
Padding	Specifies space around the Component, within the borders of the Component. Click toggle advanced padding to specify top, bottom, left, and right values. Select suitable units from px, rem, or u.
Margin	Specifies space around the Component, around the border of the Component. Click Toggle advanced margin to specify top, bottom, left, and right values. Select suitable units from px, rem, or u.
Border	Specifies the color, size, and corner radius of a border. Use the toggle to configure a particular edge.
Drop shadow	Specifies the position and blur of a drop shadow.

Text Components

Text Components have additional appearance settings.

Font	Specifies the web font that the text appears as
Font Size	Specifies the font size, in px, rem, or u.
Bold, italic, strikethrough	Use the buttons to toggle these font settings
Horizontal and vertical Justification	Align the text left, middle, or right, or top, middle, or bottom within the Component
Color	To select an appropriate color, use the color-picker, or alternatively, specify a Hex or RGBA value.

Container appearance layout

The Container is a special Component that groups Components together.  Containers give you layout controls for the Components within them.  This means that you can position elements relative to one another within the Container.  If you group Containers within a Container, it is possible for you to create complex layouts with several Components that interact with each other.

The following settings are available:

Depending on the layout option, this provide component positioning along the opposite axis.  Gap Sets a fixed gap size between components within the container

Example: Updating the appearance of a Component

The following example, adds styling to text and button components in your App.

This may provide a better user experience for someone using your interface. 

To configure Appearance:

1. Click on the Text Component box in your App.
2. On the Appearance and Configuration panel, click on Appearance
3. Click Background.
4. Change the color of the background to your favorite color.
   
   Important: Check that your backgrounds are not transparent, use the alpha slider to change the transparency value.
5. Click on Border.
6. Change the color of the border to your favorite color.
7. Change the size of the border to 8px.
8. Change the border radius to 15px