Discussion

Ask the Expert - Front-end User Interface with Richard Marsot

Join Richard Marsot for this exciting session November 5 - November 16 to learn how to build components and interactions to match the UX design.

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 part of the core UI platform as well as on the mobile and reporting capabilities. He provides regular training sessions to the Pega development teams on UI Best practices including accessibility and localization.

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. The flex-based layouts and the 100+ helper classes are the foundation layer for wiring all your components on your page. I’d love to hear your questions/feedback around the challenges and difficulties that you have when building UI screens!

Ask the Expert Rules:

  • Follow the Product Support Community's Community Rules of Engagement
  • This is not a Live Chat - Our SMEs will reply to your questions over the course of this two-week event
  • Questions should be clearly and succinctly expressed
  • Questions should be of interest to many others in the audience
  • Have fun!

Group Tags

Comments

Keep up to date on this post and subscribe to comments

November 8, 2018 - 11:29am

Hello everyone,

to get the conversation started, I published 3 new best practices documents today:

https://community1.pega.com/community/pega-support/question/best-practices-using-design-templates-deliver-consistent-user

https://community1.pega.com/community/pega-support/question/best-practices-using-section-ruleform

https://community1.pega.com/community/pega-support/question/best-practices-styling-your-application 

Please let me know if you think that this content is helpful and if there is any other topics that you would want me to tackle.

Thanks

-richard

 

 

Pega
November 7, 2018 - 12:02pm
Response to RichardMarsot

Hi Richard, Thanks for posting the best practices document !!!

I was going through the section ruleform document and have a question on "Consolidate actions in the action set" topic. Is there any OOTB action set using this model?

Reducing the number of HTTP requests looks promising. We have using multiple actions for an event in many instances and looking forward to use the consolidate actions. So I would like know to if there are any limitations to using this.

November 8, 2018 - 9:23am
Response to Chithra

Chithra,

often, the primary page when you run an activity / DT might be different if you run a refresh section with a pre-activity / pre-DT since your control that has the action set might be in a sub-page or a completely different context has the section.

the recommendation is that chaining actions like run activity / run DT is very expensive and it is better to create a wrapper activity/DT that run all of them at once and handle errors. If you can also use the wrapper in the reload section, you can get down to a single HTTP request which is very atomic and can improve the user experience. In this case, you need to handle the page context difference manually.

Pega
November 8, 2018 - 6:46pm
Response to RichardMarsot

Thanks @RichardMarsot !!! We are going to try this festure in our upcoming story work.

November 13, 2018 - 4:56pm
Response to RichardMarsot

Hi Richard,

Are there any best practices or additional resources for using flex based layouts?

I feel like a lot of times, when building out UI, I always end up nesting more dynamic layouts then I need to. I have played around with the various property panel settings (like Right flex-end) and that has helped to improve things to a certain extent. I noticed there are a lot of flex based helper classes, is it recommended to just play around with those, get familiar with them and try to leverage them as much as possible?

Regards,
Meghan

November 16, 2018 - 4:16pm
Response to MeghanAtkins

I will publish a new best practice document in the coming weeks on how to use some of the out of the box helper classes to implement some typical layouts.

One of the most useful helper class is flex-grow-1 that removes the need to use flex-right-end and reduces the number of layouts.

Pega
November 8, 2018 - 6:57pm

Richard,

With regards to the helper class, I saw a question posted by an user:

https://community1.pega.com/community/pega-support/question/unable-view-list-helper-classes-pega-731

How could one investigate this kind of issue? Since it was mentioned that manually adding the helper class worked but the contents/list of classes were not shown in the modal.

-Chithra.

November 9, 2018 - 9:28am
Response to Chithra

Chithra,

Thanks for reaching out - I have replied to the community post listed above. likely the user preference has a different skin defined that does not have helper classes.

 

November 16, 2018 - 4:18pm

Thank you to everyone who participated and viewed our Ask the Expert session with Richard on Front-end User Interfaces!

Thank you Richard for being our expert!

Marissa | Community Moderator | Pegasystems Inc.