Question
RABO Bank
NL
Last activity: 20 Oct 2022 6:33 EDT
Cosmos react UI - Adding Button or link in form
Hi All,
I configured constellation engine in our private cloud environment and created application which uses cosmos react.
I am able to add fields and views from App Studio but we have requirement to add Button and link on one screen ( Separate from flow action default cancel and submit) . Any idea how to achieve this?
Thanks in advance
***Edited by Moderator Marije to change type from Pega Academy to Product, added Product details and Capability tags****
Accepted Solution
Updated: 20 Oct 2022 6:33 EDT
Pegasystems Inc.
NL
What you are describing is intended behaviour. What is crucial to understand is that the use of Cosmos React is fully focused around the center-out approach. It is not a paradigm of browsing the components and then choosing it from a palette to appear on the UI. The goal is that you define the process of your case in the case designer and then the UI of the application is generated for you. It means that if there is a means for a button on your assignment other than submit, cancel or save you have to think differently about the process. Can you embed it as a separate step (perhaps conditionally) or as a local action? You don’t have that palette that you can simply use to drag and drop components on your UI.
Btw a link is possible when you have a property of type URL. But it depends a bit on what you would like to use it for.
I would definitely urge to watch the recording of the CLSA Community meetup of February this year that talked about the latest UX capabilities: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-recording
What you are describing is intended behaviour. What is crucial to understand is that the use of Cosmos React is fully focused around the center-out approach. It is not a paradigm of browsing the components and then choosing it from a palette to appear on the UI. The goal is that you define the process of your case in the case designer and then the UI of the application is generated for you. It means that if there is a means for a button on your assignment other than submit, cancel or save you have to think differently about the process. Can you embed it as a separate step (perhaps conditionally) or as a local action? You don’t have that palette that you can simply use to drag and drop components on your UI.
Btw a link is possible when you have a property of type URL. But it depends a bit on what you would like to use it for.
I would definitely urge to watch the recording of the CLSA Community meetup of February this year that talked about the latest UX capabilities: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-recording
There is also a set of Q&A posted here: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-qa
There is also an academy mission that I would recommend: https://academy.pega.com/module/configuring-cosmos-react-applications/v1
@Sam Alexander anything to add?
Updated: 25 Apr 2022 10:56 EDT
Pegasystems Inc.
GB
@KartishR4691 can you confirm you checked the documentation?
Theme Cosmos has limitations, as documented here and here .
eg
General limitations
Cosmos React does not support the following features in Pega Platform version 8.7:
- Offline mode
- Push and subscribe notification channels
- Multichannel features, including email and chat integration
- Rule delegation
- Paragraph rules
- Exporting tabular data to Excel
- Forms to edit or create data objects (data views are read-only)
Button configuration element documented here.
RABO Bank
NL
@MarijeSchillern Yes I have checked this. But what does that mean 'its replaced by configurable components'? When we try to add something in form it gives only option to add field and views. Where can i find these configurable components in AppStudio and how can we use it in form.
Pegasystems Inc.
GB
@KartishR4691 as I am not a UI expert I will leave that question to be answered by our SME.
I was only able to find the Getting started with React documentation which hints at the need to import these components.
The page informs us that more documentation is coming:
---> If you mark the information of that page as Not Helpful, it allows you to submit Feedback on what information is missing.
Feel free to click Submit feedback to allow us to improve our documentation.
Updated: 29 Apr 2022 9:22 EDT
RABO Bank
NL
@MarijeSchillern Could you please consult your SME. We are not getting option of UIComponents after clicking on 'Add' button on forms as shown in attached image. What may be the issue
Pegasystems Inc.
GB
In case this is of interest to you, we now have two Cosmos React sets of content on Pega Academy:
Pega Cosmos Designer - (for front-end developers, designers) a mission on front-end design principles that apply across both Cosmos React and Theme Cosmos versions of the design system; and
Configuring Cosmos React applications - (for front-end developers) a module that teaches how to configure common concepts in Cosmos React, such as Views.
I will try to get an SME to respond to you regarding your issue with the 'Add' button functionality,
RABO Bank
NL
@MarijeSchillern we are getting below error in console when rendering 'User Interface' of case type.
/usr/src/app/dist/customers/pic-dev/components/casetypelist/casetypelist.js has not been synced for this environment.
Can someone see the reason for this?
Pegasystems Inc.
GB
@KartishR4691 this appears to be a different question to the 'Add a button' issue in this post - would you be able to post it seperately?
I will try to get an SME to respond to both issues.
Accepted Solution
Updated: 20 Oct 2022 6:33 EDT
Pegasystems Inc.
NL
What you are describing is intended behaviour. What is crucial to understand is that the use of Cosmos React is fully focused around the center-out approach. It is not a paradigm of browsing the components and then choosing it from a palette to appear on the UI. The goal is that you define the process of your case in the case designer and then the UI of the application is generated for you. It means that if there is a means for a button on your assignment other than submit, cancel or save you have to think differently about the process. Can you embed it as a separate step (perhaps conditionally) or as a local action? You don’t have that palette that you can simply use to drag and drop components on your UI.
Btw a link is possible when you have a property of type URL. But it depends a bit on what you would like to use it for.
I would definitely urge to watch the recording of the CLSA Community meetup of February this year that talked about the latest UX capabilities: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-recording
What you are describing is intended behaviour. What is crucial to understand is that the use of Cosmos React is fully focused around the center-out approach. It is not a paradigm of browsing the components and then choosing it from a palette to appear on the UI. The goal is that you define the process of your case in the case designer and then the UI of the application is generated for you. It means that if there is a means for a button on your assignment other than submit, cancel or save you have to think differently about the process. Can you embed it as a separate step (perhaps conditionally) or as a local action? You don’t have that palette that you can simply use to drag and drop components on your UI.
Btw a link is possible when you have a property of type URL. But it depends a bit on what you would like to use it for.
I would definitely urge to watch the recording of the CLSA Community meetup of February this year that talked about the latest UX capabilities: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-recording
There is also a set of Q&A posted here: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-qa
There is also an academy mission that I would recommend: https://academy.pega.com/module/configuring-cosmos-react-applications/v1
@Sam Alexander anything to add?