Question


Exavalu
IN
Last activity: 4 Oct 2021 2:55 EDT
Non-availability of UI component on Cosmos react Pega 8.6(Personal edition) mentioned in design.pega.com
We have implemented Cosmos React running on Personal Edition and Constellation service on local machine using the docker image. The personal edition of Pega interacts with the running container on the same machine. However when we are looking at the UI components when creating a View in Pega, we are getting only Text, how do we ensure we can get all the components mentioned in design.pega.com?
-
Like (0)
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution
Updated: 4 Oct 2021 2:55 EDT


Pegasystems Inc.
US
@SirsenduD not all components can be used in a view or are mapped to 'fields'
skiplink is something that is used for accessibility at the portal level - it is not a form component
emojis is used for the chat component
switch is not configurable yet in App studio authoring - it will be in 8.7
design.pega.com is about the Cosmos Design system and the component library - this is NOT a documentation of what you can do in App Studio and how you can author views.


Exavalu
IN
@SirsenduDI need help


Pegasystems Inc.
US
@SirsenduDthe browser communicates directly with the Constellation service to pick up components. The easiest way to find what is wrong is to use the network tab in dev tools. I have attached an image here. when going to the 'user interface' tab, in the network trace, there should be a call to the Constellation service, with path /your_app_name/componentslist. Could you check for that call, and response.
Thanks
Nigel
Updated: 14 Jul 2021 1:07 EDT


Exavalu
IN
First – The service is available on Docker.
Second – I also check on network trace and service is available.
Third – In Network trace Components are also available.
Though components are available on the above screenshot. But the components are unavailable on User Interface.


Pegasystems Inc.
US
@SirsenduD This is a good start. Could you repeat with 'caching' off in dev tools - the network trace should show the components coming from the Constellation service, not 'disk cache'. Then check the 'console' tab of dev tools. if the components are being transferred to the browser correctly, but not being displayed, the problem may show up in the console.


Exavalu
IN
@johnn I have checked the network trace with disabling cache.
I have also checked console tab. There is no error found.


Pegasystems Inc.
US
@SirsenduD this is the expected output - the only OOB UI component is 'Text' in Pega 8.6 - in Cosmos React, you will no longer be available to pick any component and associate a property. This caused too much confusion and lead to incorrect data model and ui component usage.
In Cosmos React, your data model will drive the presentation. So if your property is of type of 'currency', it will automatically use the currency component under the cover.
To add property, you need to select 'Fields'
-
Max DeAngelis
Updated: 15 Jul 2021 5:10 EDT


Exavalu
IN
@RichardMarsot I understand your reply. Please tell me how I can use the "Form Controls" mentioned in design.pega.com on my application.


Pegasystems Inc.
US
@SirsenduDas I explained previously, they come automatically when selecting the type of a property.
e.g. property of type 'text' -> Text input, 'paragraph' -> Rich Text or TextArea, 'currency' -> Currency Input


Exavalu
IN
@RichardMarsot I get your point. Now I am trying to find emoji pickers, switch, Skip Link, Form Progress e.t.c. to implement my application.
Accepted Solution
Updated: 4 Oct 2021 2:55 EDT


Pegasystems Inc.
US
@SirsenduD not all components can be used in a view or are mapped to 'fields'
skiplink is something that is used for accessibility at the portal level - it is not a form component
emojis is used for the chat component
switch is not configurable yet in App studio authoring - it will be in 8.7
design.pega.com is about the Cosmos Design system and the component library - this is NOT a documentation of what you can do in App Studio and how you can author views.