Altering the appearance of an App Studio Component

TABLE OF CONTENTS

• General Appearance Settings
• Text Components
• Conditional styling
• Example: Updating the appearance of a Component

The App Studio allows you to apply extensive styling capabilities on components, eliminating the need for familiarity with CSS-styling and front-end development.

As an App developer, you can configure the appearance of App Studio Components. For a full list of App Studio Components, see the Adding App Studio Components.

To change the appearance of a Component:

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

Note: Some settings are specific to certain type of Components.  

General Appearance Settings

The following appearance settings apply to most App Studio Components:

Appearance setting	Description
Size & position	Define X and Y coordinates relative to their parent container. Adjust Width (W) and Height (H).
Visible	Control the visibility of a Component. Use a moustache expression to evaluate a Component's visibility based on a Data Set.
Background	Specify the color of the Component background using the color picker or providing Hex/RGBA values.
Padding	Add internal spacing within the Component borders. Click Toggle advanced padding to specify top, bottom, left, and right values. Select suitable units (px, rem, or u).
Margin	Add external spacing around the Component. Click Toggle advanced margin to specify top, bottom, left, and right values. Select suitable units (px, rem, or u).
Border	Customize border color, size, and corner radius. Use the toggle to configure a particular edge.
Drop shadow	Configure color, position, and blur of a drop shadow.

Text Components

Text Components have additional appearance settings:

Setting	Description
Font	Select a web font for the text.
Font Size	Specify the font size in px, rem, or u.
Text Styles	Use the buttons to toggle the bold, italic, strikethrough, or underline styles.
Horizontal and Vertical Justification	Align the text horizontally (left, center, right) or vertically (top, middle, bottom) within the Component.
Color	Select an appropriate color using the color picker or providing Hex/RGBA values.

Conditional styling

Conditional styling allows you to apply different styles to Components based on specific conditions or expressions. By setting a condition, you can customize the look of Components to match different states or values in your application.

To apply conditional styling:

1. Locate the Conditional Styling section.
2. Click Add new condition.
   
3. Specify a name for the conditional style.
4. Set a condition by defining an expression.
5. Configure the rest of the settings according to the type of the Component.
   

Example: Updating the appearance of a Component

The following example demonstrates how to style a button component in your App.

To configure Appearance:

1. Click on the Button Component box in your App.
2. In the Appearance and Configuration section, select Appearance.
3. Modify the Background:
   3.1 Set the background color. Adjust transparency using the alpha slider if needed.
4. Customize the Border:
   4.1 Change the color of the border to your preferred choice.
   4.2 Set the border size to 2px.
   4.3 Adjust the corner radius to 8px.