Guided Workflow - Secure Screen - Display Components
Updated
Overview
This article provides an overview of the Secure Screen Node components in Sprinklr's guided workflows, focusing on the Banner and Description Text features. It highlights their key functionalities, customization options, and practical use cases for enhancing user experience and ensuring data security.
There are two display components in the Secure Screen Node:
Banner
The Banner display option is a versatile feature designed to help users display important notifications or messages within a form or interface, making it highly customizable for different use cases. Sprinklr offers several types of banners that can be integrated into forms or UIs to visually communicate important information or status updates to users.
Various Fields in Banner Component
Title: The title is the primary, prominent text in a banner. It conveys the main message or theme and captures the viewer's attention immediately. It is usually bold, larger in size, and serves as the focal point.
Example: "Welcome to Our Winter Sale!"
Subtitle: The subtitle is secondary text that provides additional context or details about the title. It supports the main message with relevant information and is typically smaller in size and less prominent.
Example: "Up to 50% off on all items until January 15th!"
Together, the title and subtitle work to engage the audience and deliver both the core message and supporting details effectively.
Alignment in Banners:
Start Alignment: The content (text, images, or elements) is aligned to the left side of the banner.
Use Case: Creates a structured look, often used when the design emphasizes a logical flow or pairs text with an image on the right.
Example: Title and subtitle are placed on the left, while the rest of the banner space remains open or used for visuals.
Center Alignment: The content is aligned to the center of the banner (horizontally and/or vertically).
Use Case: Best for symmetrical designs or when the content needs to grab attention equally from all sides.
Example: A sale announcement with the title and subtitle in the middle of the banner for maximum focus.
End Alignment: The content is aligned to the right side of the banner.
Use Case: Adds a modern or unconventional look, often paired with visuals or negative space on the left.
Example: The title and subtitle are on the right side, and the left is used for decorative imagery or emphasis.
Each alignment choice affects the banner's visual hierarchy and message emphasis.
Types of Banners: Sprinklr offers a variety of banner types that cater to different scenarios. Each type is visually distinct, ensuring that users can quickly understand the nature of the message being communicated.
Warning Banner: Typically used to alert users to potential issues, important considerations, or cautions. It helps prevent errors by drawing attention to critical points.
Example use case: A warning message before a user performs an irreversible action, like deleting data.
Success Banner: Indicates positive outcomes or confirmations, reassuring the user that an action has been completed successfully.
Example use case: After submitting a form, a success banner can confirm that the submission was successful.
Error Banner: Displayed when something goes wrong or an error occurs. This type of banner informs users about issues that need to be addressed.
Example use case: Invalid form submission or failed payment process, guiding the user on what to correct.
Disclosure Banner: Used to provide additional information or disclosures that are important for the user to be aware of, without indicating an error or success.
Example use case: Informing the user about terms and conditions, privacy policies, or new features in the application.
Reminder Banner: Reminds users of something important that still needs attention or action. It often serves as a gentle reminder without being intrusive.
Example use case: A reminder for the user to complete a profile, update a password, or finish a registration process.
Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as field values, or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security.
Example
Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High."
Implementation: Visibility Condition: Ticket_Priority == 'High'
Result: The "Priority Escalation" section appears only for high-priority tickets.
Description Text
The Description Text display option is a versatile feature that adds contextual information or instructions within a form or user interface, enhancing user understanding and reducing confusion. This text can serve as a simple output on the screen, with customizable font, size, and alignment. Additionally, links can be embedded, or resources included by inserting relevant placeholders, offering a richer user experience.
Various Fields in Description Text
Auto Refresh Content: The user can set the auto-refresh time that will refresh the HTML code and make it fix.
Make Text Copiable: This will allow the end user to copy the text of the HTML code.
Refresh Interval: This field specifies the time interval (in seconds) at which the displayed content automatically refreshes. It ensures that the information remains up-to-date without requiring manual intervention, which is particularly useful for dynamic data or real-time updates.
Visibility Conditions: A rule or set of rules that determine whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as user roles, permissions, field values, or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security.
Example
Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High."
Implementation: Visibility Condition: Ticket_Priority == 'High'
Result: The "Priority Escalation" section appears only for high-priority tickets.
Controlling Field: A controlling field is a field whose values determine the available options or behavior of another related field (called a dependent field). It acts as the parent in a relationship, influencing what the dependent field displays or how it functions based on its selected value.
Example: In a form, the "Country" field is the controlling field, and the "State" field is the dependent field.
If "Country" = USA, the "State" field shows states like California, Texas, New York.
If "Country" = India, the "State" field shows states like Maharashtra, Punjab, Kerala.
This ensures that the dependent field displays only relevant, context-specific options.