Styling Guided Workflows Using the Application Manager
Updated
Overview
This article offers a comprehensive guide on styling Guided Workflows through the application manager. It addresses both global styles and specific components, including buttons and input fields. The guide outlines various customization options, including background color, font settings, padding, and typography, allowing you to create a fully personalized design.
Steps to Open the Guided Workflow Application Manager for Styling
Click the New Tab icon. Under the Sprinklr Service tab, click Guided Workflows within Resolve.
Navigate to the Guided Workflow Applications tab from the left pane.
Next, hover over the desired Guided Workflow Application and click the Edit Styles icon.
Once you click the Style section, you will see how the Guided Workflow appears in the respective location.
On the right side, the styler is divided into two sections: Global Style and Components.
Global Style
If you select the Global Style, it is further divided into three parts:
Container
Header
Footer
Enable Transparent Background: Allows the Guided Workflow to inherit the background of the host page by making its own background transparent.
Various Styling Options in Global Style
Hide Screen Header: If you click this checkbox, the header of the guided workflow is removed.
Background Colour: To change the background colour of the container, header, and footer, select the desired colour from the background section.
3. Font Family: To set the font as needed, you must upload the font via the asset manager.
Note: In the Header and Footer section, you will find the same categories for editing both the header and footer.
4. Spacing: Spacing in a form refers to the space between the element's content and its border. It creates internal spacing within the element and is defined for four sides: left, right, top, and bottom. Here’s a breakdown:
Left Padding
Definition: The space between the content of the element and its left edge (border).
Effect: Pushes the content inward from the left side, increasing space on the left.
Example: Adding padding-left: 20px creates 20px of space on the left of the content.
Right Padding
Definition: The space between the content of the element and its right edge (border).
Effect: Pushes the content inward from the right side, increasing space on the right.
Example: Adding padding-right: 15px creates 15px of space on the right of the content.
Top Padding
Definition: The space between the content of the element and its top edge (border).
Effect: Pushes the content downward, increasing space on the top.
Example: Adding padding-top: 10px creates 10px of space above the content.
Bottom Padding
Definition: The space between the content of the element and its bottom edge (border).
Effect: Pushes the content upward, increasing space at the bottom.
Example: Adding padding-bottom: 5px creates 5px of space below the content.
5. Typography: It refers to the changes in the font of the header and footer.
Font size is the measurement for the font you want to set uniformly for the header and footer.
Font weight indicates how bold you want the font to appear in the form.
Font colour allows you to set the colour of the font accordingly.
Components
Now, the second part of styling focuses on the Component, which is further divided into two sections:
Buttons
Input Fields
Various Styling Options for Components
Buttons
Customization: Buttons can be fully customized through the form editing options. You can adjust the border radius and border width to fit your design needs.
Padding and Font: To adjust the internal spacing, use the horizontal and vertical padding options. Additionally, you can change the button's font and font size to match your design.
Custom Buttons:
This feature allows you to style primary and secondary buttons. You can choose the background color and font for each button type, ensuring consistent design and functionality.
Input Fields
Input Containers: You can customize the shape and size of the component by adjusting the border radius and border width.
State and Interaction: This section helps you configure how the input field appears when interacted with (e.g., hovering). By default, the hover state is pre-configured, but if you select the hover option, you can modify the border color, making the field highlight when hovered over.
Typography: This section allows you to style the text within the input fields. It includes the same options as the typography section for consistency.
Note:
For input fields under the Component Section, it is recommended that the line height be at least 1.5 times the font size to maintain optimal readability and spacing.
However, not following this practice, as shown in the above screenshot, may result in a visual issue where an arrow or scrollbar can be seen in front of the Label component, as illustrated in the example below (to be fixed in the 20.10 release):
To prevent this, it is essential to configure the font size and line height parameters such that line height >= 1.5 * font size. Therefore, in the above case, line height >= 24 px.
Line Height: Line-height is a CSS property that specifies the height of a line of text. It determines the vertical spacing between lines in a block of text. You can use line-height to control the spacing between lines of text to improve readability and visual aesthetics.