How to display a banner in Constellation
We have a requirement to display a case wide message to the user based on certain flag property
Example below, how to achieve this from constellation.
Accepted Solution
Updated: 3 Jul 2024 9:29 EDT
Pegasystems Inc.
GB
To use the banner component you would need to create and publish a DX component to your application. The Constellation DX components (pega.com) documentation explains about this and there are some videos, and tutorials that you can review to get started.
There is also some information in the Extending Constellation UI options | Pega Academy module which is part of the larger Constellation Adoption | Pega Academy mission.
For a ready made example of a banner component you can review and try out the components in the Constellation UI Gallery which include a banner sourced from a data page.
Eclatprime Digital Private Limited
SG
Displaying a banner in Pega Constellation involves creating a UI component that can be included in your application's user interface. Pega Constellation, being a modern UI architecture, uses a component-based approach for building user interfaces. Here's how you can create and display a banner in Pega Constellation:
Step-by-Step Guide
1. **Create a Banner Component:**
- First, you need to create a new view or section in Pega that will serve as your banner component.
- Navigate to **App Studio** and go to **User Interface** > **Views**.
2. **Design the Banner:**
- Click on **Create** to create a new view.
- Give your view a name, such as "BannerView".
- In the view editor, add the necessary UI elements to design your banner. This could include text, images, buttons, or other components.
- Use Pega's design tools to style your banner according to your requirements. You can add background colors, fonts, margins, and other CSS properties.
3. **Save the View:**
- After designing your banner, save the view.
4. **Include the Banner in a Layout:**
- Now, you need to include your banner view in a layout where it will be displayed.
Displaying a banner in Pega Constellation involves creating a UI component that can be included in your application's user interface. Pega Constellation, being a modern UI architecture, uses a component-based approach for building user interfaces. Here's how you can create and display a banner in Pega Constellation:
Step-by-Step Guide
1. **Create a Banner Component:**
- First, you need to create a new view or section in Pega that will serve as your banner component.
- Navigate to **App Studio** and go to **User Interface** > **Views**.
2. **Design the Banner:**
- Click on **Create** to create a new view.
- Give your view a name, such as "BannerView".
- In the view editor, add the necessary UI elements to design your banner. This could include text, images, buttons, or other components.
- Use Pega's design tools to style your banner according to your requirements. You can add background colors, fonts, margins, and other CSS properties.
3. **Save the View:**
- After designing your banner, save the view.
4. **Include the Banner in a Layout:**
- Now, you need to include your banner view in a layout where it will be displayed.
- Navigate to the section or page where you want the banner to appear. This could be the main dashboard, a specific case type, or any other part of your application.
- Open the layout in the editor.
5. **Add the Banner View to the Layout:**
- In the layout editor, add a new **Embedded section** or **View** component.
- Select your "BannerView" from the list of available views.
- Position the banner view appropriately within the layout. Typically, banners are placed at the top of the page or section.
6. **Configure Visibility (Optional):**
- If you want the banner to be conditionally visible, you can configure visibility settings.
- Select the banner view in the layout and configure the visibility conditions based on user roles, case statuses, or other relevant criteria.
7. **Test the Banner:**
- Save the changes to your layout.
- Run the application to test the banner. Ensure it appears as expected and meets your design requirements.
IP Australia
AU
@BhanuPrasanthT Thanks for the quick response
- Use Pega's design tools to style your banner according to your requirements. You can add background colors, fonts, margins, and other CSS properties. How do we do this? a custom dx component?
Also, rather creating a view, I like to see if there is any component as we also need an ability to dismiss the banner, like the example screen shot I have attached.
Pegasystems Inc.
GB
There is a banner component available in the constellation UI design system. You can see the details here:
Banner | Pega Constellation design system
There is also an existing example banner component in the Constellation UI Gallery linked below:
Widgets / Banner - Docs ⋅ Storybook (pegasystems.github.io)
Further documentation about developing DX Components can be found here:
IP Australia
AU
Thanks @Marc Alderman,
Banner component from design system solves my use case, is there any article on how to use this component?
Accepted Solution
Updated: 3 Jul 2024 9:29 EDT
Pegasystems Inc.
GB
To use the banner component you would need to create and publish a DX component to your application. The Constellation DX components (pega.com) documentation explains about this and there are some videos, and tutorials that you can review to get started.
There is also some information in the Extending Constellation UI options | Pega Academy module which is part of the larger Constellation Adoption | Pega Academy mission.
For a ready made example of a banner component you can review and try out the components in the Constellation UI Gallery which include a banner sourced from a data page.