Discussion
Pegasystems Inc.
US
Last activity: 26 Feb 2021 17:07 EST
Ask the Expert - Cosmos - Building Advanced UI with Richard Marsot
Join Richard Marsot @RichardMarsot in our first Ask the Expert session of 2021!
Richard will be here to answer your questions regarding Building an Advanced UI using Cosmos or UI-Kit starting February 15th through February 26th!
Gather your questions now and get prepared to join us!
Meet Richard:
Richard joined Pegasystems in 2010 and is leading several front end development teams working on the Pega Platform. He’s worked on different parts of the core UI platform and has done several training and demos around Cosmos and UI Best practices.
Message from Richard:
Hello! I am looking forward to answering all your questions on how you can leverage the capabilities of the Pega Platform to build some very advanced user interactions and components using Cosmos or UI-Kit. We recently released a new Front-end foundation mission on Pega Academy that covers some of these topics. I’d love to hear your questions/feedback around the challenges and difficulties that you have when building complex UI screens!
Pegasystems Inc.
US
Hello everyone!
@RichardMarsot's session is open for questions!
Please ask away and follow these rules outlined below.
Ask the Expert Rules
- Follow the Pega Collaboration Center’s Guidelines
- This is not a Live Chat - Richard will reply to your questions over the course of the session (15 February - 26 February)
- Questions should be clearly and succinctly expressed
- Questions should be of interest to many others in the audience
- Have fun!
Updated: 16 Feb 2021 18:19 EST
Lloyds Banking Group PLC
GB
I've couple of questions -
- I'm using Pega 8.5.2 version and DX API V1, developed a single page application using react framework, the use case is basically to show a set of questions to user. All the questions will not be displayed in one go, instead one question at a time, based on the answer of 1st question - 2nd question need to be displayed. Similarly, there are around 10 to 15 questions on the page. In this case, I had to call refresh API every time user clicks on an option, get the next set of fields, update state in react and re-render page. This is working. But the problem here is - calling API every time onChange of selection. This is not acceptable according our client architecture guidelines. Is there any way Pega can return the complete when condition expression instead of just
visible : "true"?
-
I'm also exploring V2 API to address this issue. But I didn't find any solution. I see there is a difference in the JSON response between V1 and V2. I would like to understand what is the exact difference? What benefits V2 has over V1? I am more interested on the below APIs.
/assignments/{ID}/actions/{actionID} Get action details of an assignment /cases/{ID}/actions/{actionID} Get case actions details
/cases/{ID}/views/{viewID} Get view details for a case
Thanks in advance!
Pegasystems Inc.
US
@VENKATESH GUDEENTI there are multiple ways that you can implement this
1/ if the 20 questions are static and do not depend on the previous answers, you can call the api to get all the questions in one HTTP request and then render each question one by one on the client side. If the question change, another option would be to have each question had a separate step / flow action and to determine the next step on the server side when submitting the assignment.
Note that v1 API does only support server side when rule and not condition expression.
2/ v2 api is not going to address this issue - the 8.5 version is a preview version and not only the functionality available in the v1 api is available in the v2 api - using the v2 api requires to use the new UI View rule type which will likely introduce additional work. The JSON response for the v2 is completely different from the v1 version and will require an update in the intepreter logic - you can find an example of the interpreter logic in the Mashup web component on github - the component supports both v1 and v2 - https://github.com/pegasystems/mashup-webcomponent
Pegasystems Inc.
US
Lloyds Banking Group
GB
@RichardMarsot is there a view to enhance V2 of the dx api's to address expressions if the we move to 8.6+ versions?
Pegasystems Inc.
US
@samernazer yes - the DX API in Pega 8.6 will add support for 'refresh' (similar to the v1 API) - the refresh endpoints provides ability to re-evaluate the declarative expressions and to rerun visible when condition - Also the API will support condition expression on each field for visible, disabled and required.
Updated: 17 Feb 2021 10:13 EST
Morgan Stanley
IN
Hi,
Do we have any option of freezing columns in Optimized Grid in Pega Cosmos 2.0
We have a usecase where we have a checkbox in a grid and due to number of columns we get a horizontal scrollbar. Would have been nice to freeze the checkbox column so that users dont have to scrollback and click on checkbox.
@RichardMarsot : Is that supported in Pega Cosmos (not React version)
Pegasystems Inc.
US
I have moved your reply into the Ask the Expert session here with Richard Marsot so that he may see your question and reply to you here about Cosmos!
Thanks!
Pegasystems Inc.
US
@Avinash.HaridasuI created a separate discussion to provide details on how to freeze the first column and the header for an optimized table - I hope that you will be able to apply the steps provided in this doc - https://collaborate.pega.com/discussion/how-freeze-first-column-optimized-table
Morgan Stanley
IN
In this article
we've talked about modern grid in React.
Can that be brought to Pega Cosmos (not React Cosmos) as a component and if yes does it have any performance benefits over Optimzied Grid.
Pegasystems Inc.
US
@Avinash.Haridasu yes - the new React based table can run in hybrid mode in Pega 8.5 - you can still use Cosmos Theme and for some of the landing pages, use the new React based tables. The limitation is that the landing page only contains the table. You cannot have other UI elements in the page.
Birlasoft Ltd
IN
Hi Richard,
Please help to solve this query. Thank you in advance.
UX UI Designer Role while working on Pega Platform-
As UI UX designer I am learning course like UX essentials and User interface foundation But I have a query that what is the exact task I am Going to perform. Like if I have to provide the High fidelity wireframe, do I need to use Sketch, Adobe XD applications Or I need to use the Pega application to do design.
Usually, UI developer does the front end development and I don't know development.
Or can I use a UI kit of Cosmos design to create the new template?
Or All these things depend on the Client requirement?
Pegasystems Inc.
US
@PrathameshC6053 https://design.pega.com should provide all the details on how to get started for a UX designer - it includes link to download the sketch library for Cosmos or UI-Kit to create wireframe.
Birlasoft Ltd
IN
Hi Richard,
Thank you very much.
One last question, Do Pega have Adobe XD library for Cosmos or UI-Kit to create a wireframe?
Pegasystems Inc.
US
@PrathameshC6053 Unfortunately, we do not provide an Adobe XD library of the Cosmos or UI-Kit components. The UX design group is only using Sketch. Having said that you can import sketch files directly into Adobe XD - see https://letsxd.com/sketch
Birlasoft Ltd
IN
OK. Thank you very much
Morgan Stanley
IN
Hi @MarissaRogers @RichardMarsot
Kindly don't mind if the questions are lame. I'm just trying to understand the relevance of selecting React options in application rule VS having a React Cosmos app.
In Application rule we have below options:
Server rendered UI - Use react based landing pages: My Question => Does it mean that the underlying FW used would be react to render the landing pages and we can leverage Adv Grid options like below
React-based UI (Early Beta – not for production use) => Does this mean when I launch Cosmos UserPortal from Designer Studio, it is rendered completely in React, similar to React Cosmos.
Pegasystems Inc.
US
1/ Server rendered UI
This is using the current Pega UI rendering technology with section and rules - You can use ui-kit or Theme-Cosmos - You can also take advantage of React for some of the landing pages - the whole landing page can be rendered using React JS.
2/ React based UI (early beta)
this mode will run ALL end user portal in React based JS - You will no longer use section or skin ruleform - Your UserPortal from Theme-Cosmos will no longer work since it still used the current Pega UI technology.
After turning this setting on,
a/ copy the Application URL alias (displayed in the same page)
b/ logout and login again using the Application URL alias (VERY important - React based UI authentication will require to use the application URL)
c/ create a new Web channel (your old portal will NOT run in React - since your app is now React based enabled, any NEW Web channel will run as a React based portal)
d/ run the new web channel as a secondary portal or as a preview in App Studio - this will run as a React based UI.
e/ Go to the case designer and start to update / modify the views.
WellsFargo
IN
Hi Richard,
1) We are following the guideline of using the design template to create sections but for a scenario where a screen includes a list ( Repeating grid, Repeating Layout), layout groups and other structural components in a section I am forced to create a section with out design templates? What is your recommendation to handle these scenarios? Is Pega planning to come up with templates to support the use cases said above?
2) Today optimized table has limitations like select all check box does not work and few others. Is there any documentation which list all these limitations? or Any comparision table between Table and Optimized table?
3) Can I use the flex helper classes for the sections built using the design templates?
Thanks,
Suman
Pegasystems Inc.
US
1/ Table do support design templates - make sure that the section only contains a table and is marked as 'editable in App Studio'. Unfortunately, all tables settings are not available using a design template. When you create a new case type, a list page is created that contains a section with a table and a design template
For the case type, you can create a list view or a form view - the former will create a table with a design template
Here is an example of the editing experience in App Studio
Open the configuration of the table in App studio
1/ Table do support design templates - make sure that the section only contains a table and is marked as 'editable in App Studio'. Unfortunately, all tables settings are not available using a design template. When you create a new case type, a list page is created that contains a section with a table and a design template
For the case type, you can create a list view or a form view - the former will create a table with a design template
Here is an example of the editing experience in App Studio
Open the configuration of the table in App studio
RDL are not supported by design templates - you will need to create a regular section - what is more important is that the section used inside the RDL is using a design template (usually a list item xxx template)
There is no plan to extend support for design template to more components. It is recommended to use design templates as much as possible and only use section when there is no template available.
2/ I recommend the following 2 articles
https://collaborate.pega.com/discussion/what-optimize-code-setting-tables
https://collaborate.pega.com/discussion/ask-expert-pega-ui-tables-sangeeta-kottilinga
For specific functionality like select all, you can read the article that I wrote last year
https://collaborate.pega.com/discussion/how-add-select-all-functionality-optimized-table
3/ sure - the helper classes can be used at the region level and at the cell level. It is important to use them with design templates.
There are limitations with using the helper classes - for example the helper class set on the container cannot be configured when using a design template.
WellsFargo
IN
@RichardMarsot Create new view of type of list , I don't see this option. Which version of Pega is the screen shot from? I checked it in Case Type from Dev and App Studio.
Pegasystems Inc.
US
@Suman Palukuru the screenshot is from Pega 8.5 - The ability to edit a table in App studio is available in Pega 8.1 and higher - see https://community.pega.com/knowledgebase/articles/whats-new-pega-platform/new-capabilities-editing-user-interfaces-app-studio
Citi
US
Hi Richard,
1) COSMOS does not allow to add a generic header to the portal. Even though when we add a section as part of the header in the screen layout, the section does not render on screen. We have to show the User Role and the server to which the user has logged in(in case of triaging an issue) to the header but it does not show up on the portal unless and until it is added in every harness like Home, Dashboard, My Worklist, Reports, etc. Was there any specific reason why the header was removed? Also is there any way where this can be taken care in a common place instead of updating each and every harness.
2) Pega does not allow to edit sections that are part of the template like CaseHeader or PortalNavigation in App Studio. New fields case be added as part of Additional Actions but cannot edit those that are part of the template unless and until the section is converted to section editor from design template. For instance, in my application the length of the Case ID is 30 characters so the Case ID and Case type texts were overlapping. We could not edit those fields that are part of the template and ended up converted those sections to Section Editor. When I opened an SR for this issue, they mentioned that this will be added as an enhancement as part of future release. Do we have any plans to fix these issues in upcoming releases?
Thanks,
Jayashree Purushothaman
Pegasystems Inc.
US
1/ the end-user portal does not have a portal header (e.g. a header similar to pyCaseWorker or pyCaseManager that is available on ALL pages) - this is a fundamental concept of the Cosmos design system - Updating the UserPortal and adding a header will likely cause side issues.
landing pages have a header to show the page name as an h1 tag. it is not supposed to be a generic header - this is the heading for this page.
2/ Cosmos Rules is built so that only sections that are recommended for customization are editable in App studio - other sections that are marked as 'available' can also be customized using Dev studio but will likely need to be updated when using a new version of Cosmos.
I highly recommend reviewing the following doc https://collaborate.pega.com/discussion/customizing-cosmos-rules-application - item #3 indicates that you should not customize the OTB portal
Pegasystems Inc.
US
Thank you @RichardMarsot for this amazing session on Cosmos!
Thank you to all of our members who have participated by asking questions and by learning more about Cosmos from Richard!
We hope to continue to see your participation and engagement throughout the Pega Collaboration Center!
Stay tuned for our next Ask the Expert: Pega Express - The Discover Phase opening Monday, March 1st!