Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Discussion

 Lochana Durgada Vijayakumar (Lochan_DV)
PEGA
Senior Manager, Knowledge Management
Pegasystems Inc.
IN
Lochan_DV Member since 2015 96 posts
PEGA
Posted: Oct 21, 2019
Last activity: Mar 24, 2020
Posted: 21 Oct 2019 0:28 EDT
Last activity: 24 Mar 2020 11:33 EDT
Closed

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!
To see attachments, please log in.
User Experience
Ask the Expert

Posted: 5 years ago
Posted: 29 Oct 2019 17:22 EDT
BINAYAK BISWAS (BinayakB)
Credit One Bank

Credit One Bank
US

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?

To see attachments, please log in.
Posted: 5 years ago
Posted: 30 Oct 2019 8:20 EDT
Shibram Sharma (shars4)
Pegasystems Inc.
Associate Architect - Case Management
Pegasystems Inc.
IN

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

To see attachments, please log in.
Posted: 5 years ago
Posted: 30 Oct 2019 6:06 EDT
Sateesh Boganadham (SateeshB6784)
Capgemini
Principal Architect
Capgemini
GB

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.

To see attachments, please log in.
Posted: 5 years ago
Posted: 30 Oct 2019 7:04 EDT
Arnab Ghosh (ghosa4)
PEGA
Senior Software Architect, UX Engineering
Pegasystems Inc.
IN

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 

Show More

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.


Show Less
To see attachments, please log in.
Posted: 5 years ago
Posted: 31 Oct 2019 14:46 EDT
Deepthi K (Deepthi Kuppili)
World Bank
IT Officer - Business Solutions
World Bank
US

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:

Show More

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:


Show Less
To see attachments, please log in.
Posted: 5 years ago
Posted: 3 Nov 2019 1:37 EDT
Arnab Ghosh (ghosa4)
PEGA
Senior Software Architect, UX Engineering
Pegasystems Inc.
IN

Hi Deepthi,

Thanks for the query.

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

To see attachments, please log in.
Posted: 5 years ago
Posted: 3 Nov 2019 23:16 EST
Lochana Durgada Vijayakumar (Lochan_DV)
PEGA
Senior Manager, Knowledge Management
Pegasystems Inc.
IN

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!

To see attachments, please log in.

Related content:

We'd prefer it if you saw us at our best.

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice