Getting started

Walkthrough Guides

CafeX Apps


Using CafeX Collaborate App


Managing CafeX

Integrating CafeX


CafeX Apps

Altering the appearance of an App Studio Component

Modified on Mon, 18 Sep 2023 at 07:52 AM

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 settingDescription
Size & positionX and Y coordinates—relative to their parent container
W and H—Width and Height positions
VisibleSpecifies the visibility of a Component.
Use a moustache statement to evaluate a Component's visibility that uses the current value of a Data Set.
BackgroundSpecifies the color of the Component background.  Use the color-picker to select a color, or provide Hex, or RGBA values.
PaddingSpecifies 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.
MarginSpecifies 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.
BorderSpecifies the color, size, and corner radius of a border.

Use the toggle to configure a particular edge.
Drop shadowSpecifies the position and blur of a drop shadow.

Text Components

Text Components have additional appearance settings.

FontSpecifies the web font that the text appears as
Font SizeSpecifies the font size, in px, rem, or u.
Bold, italic, strikethroughUse the buttons to toggle these font settings
Horizontal and vertical JustificationAlign the text left, middle, or right, or top, middle, or bottom within the Component
ColorTo 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

  • Grid— Components use their absolute position coordinates relative to the parent container.
  • Horizontal—Components are positioned in horizontal order
  • Vertical—Components are positioned in vertical order
Horizontal and Vertical ScrollSpecifies when scroll bars should appear for the container
JustificationThe following options configure the unused spacing between components within a Container:
  • Start, Middle, and End, pack the components and leave all of the unused space between a component and the parent container.
  • Space between—The first and last component bind to the edge of the container, and the remaining components are spaced equally.
  • Space around—The space either side of components is equal.
  • Space evenly—The space between components and the container edge is equal.
  • Stretch—The components fill the space to the edge of the container.
Horizontal or Vertical AlignmentDepending on the layout option, this provide component positioning along the opposite axis. 
GapSets 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

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article