Discussion

Ask the Expert - Layouts, Layout Groups & Flex with Arnab Ghosh

Join Arnab Ghosh (@ghosa4) in this Ask the Expert session (28th Oct - 1st Nov) on Layouts, Layout Groups & Flex!

Meet Arnab: Arnab is a Principal Engineer in User Experience area. He has been in the technology industry for more than 8 years, joined Pegasystems in 2015 and is mainly involved in the implementation of Layouts, Layout Groups, and flexbox implementation.

Message from Arnab: I am looking forward to a great conversation on how Layouts have evolved over the releases, questions related to Layout groups and more across Pega 7 and Pega 8! Excited to share information and answer all your queries to help you get a better understanding of it.

Ask the Expert Rules

  • Follow the Pega Support Community's Community Rules of Engagement
  • This is not a Live Chat - Arnab will reply to your questions over the course of the week (28th Oct - 1st Nov)
  • 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

Pega
October 28, 2019 - 12:07pm

Documentation for Flex Layout feature

Pega
October 28, 2019 - 2:09pm

Initial Layout Group Implementation

October 29, 2019 - 5:22pm

We have a requirement, that on click of a button, we have to open a document in a pop up in read only mode. The document can be TIFF, JPEG, PDF, Image, Docx. The document is coming from an external web service using API call.

Can you tell me what control I can use so that I can view the document instead of downloading it?

Pega
October 30, 2019 - 8:20am
Response to BinayakB

pxFilePreview control can be used here. Sample configuration can be referred from Documents LP. 

October 30, 2019 - 6:06am

We built complex screens combining many sections, layouts (having conditional visibility) and layout groups over a course of time. The final screen is having unwanted spaces in few areas of screen. Some times, we achieved consistency by adding lot of layouts. Can you please advice best way to configure layouts that can result in consistency and with no unwanted spaces taken in the screen.

Pega
October 30, 2019 - 7:04am
Response to SateeshB6784

Hi Sateesh, thanks for the question.
I am going to add few best practices before laying out a design using Dynamic Layouts, hopefully it will be helpful to avoid unnecessary spaces.
 

We should use Dynamic layouts ->

•Arranges multiple elements on a page

•DO use layouts for:

–Controlling spacing between elements

–Alignment of elements within the container

–Align element labels

–Responsiveness

•Do NOT use layouts for:

–Wrapping a single element

–Defining a container’s layout

–Creating headers

–Creating empty space

 

For arranging content :

    There are multiple Layout templates 

–1,2,3 and 4 Column

–1,2,3 and 4 Column (Inline wrapping)

–30/70 and 70/30 

–Inline wrapping

 

Additional CSS helper classes

–flex-col-4,

–flex-col-5,

–flex-col-6,

–flex-col-8

–flex-col-12

 

 

For further adjustments:

 

Global helper classes:

•180+ new documented helper classes in 7.3.1

•Several different categories

–Imported

–Text

–Dimensions

–Box model (margins, padding, borders)

–Follows specific naming conventions

–Flexbox

–Miscellaneous

•Available to all applications that inherit from pyEndUser Skin

–Can view as part of Skin Preview

 

For selecting helper classes properly :

 

•Tool that lists all documented helper classes that are available to your application

–Context-sensitive

–Able to search helper class names and definitions

•Accessed by clicking the gear icon next to the “classes” field in the control property panel

•Need to follow standardized commenting format to have other helper classes be displayed in the tool

 

However, please feel free to attach any screens for example, that have unavoidable spaces, so that I can check the specific use cases.

October 31, 2019 - 2:46pm

Hi Arnab,

We are trying to acheive the following feature which is replica from mypega.com

 

Following is configured and I was still not able to achieve it.

I also tried on the case manager portal

We are using 8.3.1 and following is the configuration.

Custom css:

pyCaseManager Harness:

Pega
November 3, 2019 - 1:37am
Response to DeepthiK7422

Hi Deepthi,

Thanks for the query.

The aside pane is expanded on simple hover. I have attached a screenshot from case manager, showing this.

Mod
November 3, 2019 - 11:16pm

Thanks everyone for making this session great by asking specific and insightful questions. Please continue asking your questions on Layouts and flexbox by writing new posts!

Shout out to our expert Arnab @ghosa4 for being awesome!

Lochana | Community Moderator | Pegasystems Inc.