Posted: 7 Nov 2016 10:06 EST Last activity: 26 Aug 2020 13:37 EDT
Ask the Expert - UX Design with Shaun Wortis
Shaun is Senior Director of Product Design. Shaun has had a long career in product design and front-end technology. He came to Pega in 2011 where he has been a driving force behind Pega 7, Pega Express, and UX and design throughout the product line. He leads Pega's UX Design Team, responsible for the design and usability of all Pega's products.
Message from Shaun:
"Hi Guys—I'm looking forward to a great conversation on design, usability, accessability, front-end development and technology in Pega, and where our products and platform are heading!"
Hi,Im using a datapage as a source for repeating grid which is of type Read only.I enabled the sorting option in operations tab of the repeating grid.On sorting, results are getting sorted on UI but in clipboard,results are as is because the data page is read only.When I change the data page to editable,this issue got resolved but with editable datapages we cant set refresh strategies.
And for the repeating grid, why cant we make clipboard page list as source?
Hi -- I'm not entirely clear on what you're trying to acheive ultimately (i.e. why does the UI and the clipboard page need to be synced in regard to sorting?) At any rate the table (grid) can be sourced from a clipboard page (the "property" option - see attachment).
Regarding read-only vs editable datapages I suppose you could source a editable datapage with a read-only (refreshable) datapage.
I have a created a SR for this (SR-B341: if you need to get more details).
I will try and outline it as simple as I can.
We have a repeating grid sourced from pc_assign_worklist or pc_assign_workbasket. Also, within the repeating grid, we need to display values from the Work Item table (via a join). There are separate columns where a code exists that need to be replaced with English/French text for the appropriate users. If those values are to be displayed in the grid that come from another table (local table) or via an embedded page (sourced from external); the values can be displayed but the English/French columns are not sortable/filterable. If using a local table(s), it appears that multiple table joins are required to display English/French in the repeating grid and have them sortable. Although this may solve (haven't proven it out yet) the repeating grid, it doesn't solve the other requiremetns where the switching English / French text are required and in fact requires a different implmentation (reports, displaying when object is opened, etc..);
To me, this does not appear to be a very elegant ("Build for Change") best practice in dealing with UX.
Am I correct? Can you provide any insight and/or direction on this? (I don't believe this is the first time this has been encountered?).
Hi - Do you mean property value translations? The sort currently would be on the clipboard and I think you're asking for client-side sorting. Unfortuntately we don't have current plans for client-side sorting. However, client-side sorting will come free with HTML5.1 (via the sortable attribute on the table tag), and the HTML5.1 spec is due for recommendation by W3C this year, so I would expect that ability on the sooner end.
Hi Shaun, no, not property value translations. Work Item has numeric codes. But the numeric code has an English and French text representation. In some cases the numeric codes have a context that is required. Thus, the property value translations would be large amounts and as the English/French may change, not an option. :( When displaying the repeating grid in English, the numeric codes should be replaced with English text; When in French, French text. But, due to language switching by different users, and the fact that down-stream processing would only need the code values, the numeric codes must remain with the Work Item.
You are correct, today 8 would map to eight or huit. Later on business requirement changes and it could change to EIGHT and HUIT.
We wouldn't want to re-do a build / migration to support that so we are looking into having that as internal database table in Pega . (currently, for these tables plus others , the Pega development team is not the System of Record). Which is where we started to see the sorting / filtering problem. A prototype (from the discussions with the SR tech) for running a local database table encountered a potential fix but highlighted a possible issue with regards to User experience and maintability/supportabillity concerns. The document as I uploaded it to the SR is attached. Keep in mind that this was anattempt to establish/obtain a best practice/design pattern for multiple constructs like this. i.e. This scenario would need to be implemented for 4 columns within the repeating grid.
Maintaining a user's sorting/filtering selections through a section/page refresh is on our backlog for a future release but I don't have a specific date however. I can say that we are planning to introduce quite a bit of personalization via the accessability work we're doing, although the scope of that work is to capture a user's preferences for high or low contrast,reduced transitions, etc (i.e. mostly style selections)
1.In repeating grid we had to define the list of columns to display. I was not able to find any option to show/Hide any column dynamically(May be based on when rule or expression). But this is a common requirement in any project to display different sets of columns in the grid. To achieve this we end up creating duplicate repreating grid with when rule and it become a nightmare for mentainance. Can you put some light on how we can implement this?
2. Suppose I have a section where user enters some details and the same section needs to be displayed to the approver in read only. But to implement the read only, I need to create a disfferent section with same UI with read only. Or we can have read only logic in each of the fields in one section. I think it would be better if we can import a section(With in other section) and make it read only, not on each field. Your thoughts?
Yes, you can dynamically create a grid. There's a "Create grid dynamically" checkbox in the data source settings in the grid's property panel. If checked the table columns will be dynamically generated, as defined in the RD. The "Specify virtual report" option allows you to display columns that are hidden in the RD, hide columns that are visible, and other dynamic changes as needed.
You can conditionalize edit/read-only options on a text input to achieve that. In the text input property panel go to the Presentation tab and investigate the "Edit options"
1. Yes, We can do that as the UI galary example with hide show from report defination. But for most of the scenario pega is not the SOR, so there is no RD in that case. Its better if we can have control on the repeating grid column lavel.
2. Yeah we can make each and every field based on some condition. But if we want to make all the fields in one section to be read only for certain purpose(May be for approver or in confirm harness), It is not a feasible and good for reuse option to do it all the fields. Am I missing something?
I have been working on Pega 6.3 and in that I have used a few report definitions for my work.
Now in that Report Definition I have several filters, out of which one is of date type(This date field is not mandatory)
When I run the Report Definition with two of the mandatory fields and a date, it is fetching me data properly.
But in the second scenario when I run the report definition with the same mandatory field values and give no date I get a report, now on this generated report if I add filter value for date with the same value as in scenario 1 I am getting different data.
What I found is, in the clipboard the value for the date column in different.
I am attaching the screenshot for the same.
This is a OTB feature so I am not even altering it.
Check for the values in index value 4 in both the images.
I am attaching some more screenshots with explanation.
Input.Jpg - This is report Definiton screenshot where the input column is being setup.
Report Definition Run.jpg - This is the screen which I get on running on running the report definition.
Output.jpg- This is the output which I get when I try to get the report as per Scenarion 1 (i.e giving the value for date in the filter value(before generation of report))
Scenario2 Output.jpg - This is the output which I get when I try to get the report as per Scenarion 2 ( i.e I give no value in the date column and generate the report and after generation of report, I again have option for adding filters on the output screen, So I enter the same value for date and hit "Apply" and I get no results)
I am getting no results because in the clipboard the values for dates that are being setup are not same even though I am giving the same values for that filter.
I do not know why it is setting different in the clipboard.
The Clipboard Screenshots I have attached in my Query (Check for the index value 4), they differ I have no idea why
We have an existing workflow application built in Pega 7.1.8. Also, we recently had a requirement to expose one of the workflow to a different system. Also, they don't want to go with the Mashup/IAC solution. The plan is to build UI outisde of Pega (in Angularjs), and invoke the code in Pega through REST services.
Is there a way to directly invoke Pega Code without using REST API's from an external application?
Can we expose Clipboard session to external application?
The REST API's in Pega 7.1.8 are not complete -
* Post Assignment API helps in executing a flow action, but there isn't an API which executed pre-activity of the Flow Action.
* All these API's assumes data is present on one single page (pyWorkPage). But in reality, the data is present on multiple pages (pyWorkPage and other top level pages parallel to pyWorkPage). How do we leverage these API's in this scenario?
Simply put, is there an easy way to build UI outside of Pega and leverage Pega for all of it's workflow, bpm, bre capabilities?
Pega has API for many things but we strongly recommened you use Pega UI to leverage the most value from the platform. We strive to be the world's best application platform and we focus on our UI capabilites, which can take full advantage of our business rules, process, and intelligence features. To answer your question: There is not an easy way to build UI outside of Pega and leverage all of the power of the platform.
I'd question why one would want to use Angular.JS when Pega UI in a mashup can achieve an identical experience for the end-user? We typically find non-business drivers when IT groups try to use Pega headless (such as "I heard Angular was cool and want it on my resume"). In fact Pega UI is far more complete than Angular or other platforms (See: http://design.pega.com/pega-vs-others)
@RAJKUMAP. My assumption here in exposing the workflow / case is that it will still run as normal within your application. If this is not the case, then please ignore the remaining (in which case you may need to leverage the appliation built-on constructs -- aka Layer Cake). I suspect Shaun will have better answer but we learned/understand that the REST API's in 7.1.8 are "v 1.0" constructs. Although they are a great starting point, they are missing info or have extra (and unnecessary) properties for the sole purpose of triggering the creation of new case. The answer would be to create your own Service-* construct to do exactly what you are looking for without , for now, having to worry about the excessive values/dependencies. Now, what Service-* use to meet this need will depend on your environment/constraints with regard to the systems integrating with each other. I would highly recommend not exposing the Clipboard (even if it was possible);
What is the difference between launching the harness target in a new window and replcing current. In some places both work the same and same places they work as expected.It defintely should have something to do with dynamic container but can you please explain?
There are three options for harness actions: "Replace current", "Pop-up window", and "New document". They will behave slightly differently depending on whether the user is in a single-document dynamic container, or in a multi-document dynamic container (i.e. uses multiple iframes).
"Replace current" should behave the same in both dynamic container methods: The currently visible inner-harness (the 'workarea') will change to the newly selected harness. "Pop-up window" should also behave identically in both dynamic container methods: A new browser window/tab is launched (the user's browser settings deturmine if a window or tab is launched).
In a single doc dynamic container, the "new document" action should behave identically to "replace current", replacing the workarea with the new content. In a multi-doc dynamic container, however, "new document" will create a new iframe inside the outer harness (page). These new iframes can launch in tabs or without tabs. If launched without tabs the user may not notice any difference between this setting and "replace current", however they are technically different—each inner harness (workarea) has its own iframe.
I should point out that the multi-doc dynamic container is really there for legacy purposes. 90% of the time the single-doc container is a far better choice. Most situations that have the multi-doc dynamic container can be redesigned for single-doc.
From the developer perspective, choosing the correct "target" for the harness action is confusing because the mode of dynamic container is not obvious. Additionally the current dynamic container methods themselves are a bit confusing in general, as is the wording for the choices in the target option. All of this dev UX could be improved, in my opinon.
The user's expanding and collapsing is on the client. The set property is meant to 'pre-collapse' one of the lists. I'd have to check to see is the script changes the property value but I doubt it—it's only for inital collapse/expand
In a repeating-grid with master detail as row-editing. Now in the top grid i have checkboxes to select any record, if we expand a record in this grid i have all the child cases related to that. So in this case if select the parent grid record checkbox all the expanded grid cases (child cases) need to be selected and if we uncheck any of the child the parent/record on expansion of which all these populated should be unchecked. Suggest an approach to achieve this.
Is the 'detail' section showing different (or additional) data from the original row? Can you send a design showing what you're trying to acheive? I'm still not understanding the reason for pre-checked checkboxes. Thanks!
In our application we have the services(SOAP/REST) exposed. We have a requirement to build harness to allow testing the services Externally. For thus reasons we have built UI Harness which in turn call the SOAP/REST services as connectors.
When displaying the Service Response, we have challenges in formatting and dispalying the SOAP/JSON Request/Response?
Is there an OOTB to format and display the Service Responses.
Thanks for replying Shaun. I have two options in my screen for the second option we are following the way you had suggested. But for the first option ,To display the raw XML/JSoN req/ res- for this am using the text area , but the problem is that the, unable to format serviceresponse and display the XML / JSON. The structure of the XML is cumulative and doesn't offer readability. Is there an option to to beautify the xml/ json display
We have a repeating grid in Home screen with source as Data page. It will display all the assignments listed in a work basket.The number of assignments can vary from 1000- 5000. Requirement is to display the complete list.
This is impacting the performance of the Application as it is taking more time(2-3 secs) to fetch the records than the specified threshold.
Here we can use Report definition and Pagination to fetch records. But, we need to perform post processing on the records fetched and then display the list which is not possible with report definition and pagination.
I have a requirement to show few lines of text [also has hyperlink inside the text] , which is help text with "?" shown in the label of dynamic layout. Once clicked or mouse over, it has to show the text and hyperlink should navigate the url website once clicked. I used field value for other text since has 4 lines sentence which greater than 64 character limit. For this requirement am using Paragraph instead of field values are not supporting html tags am not able to put hyperlink , so i decided to use Paragraph instead of fieldvalue.
I used paragraph and put the paragraph[ tried with/without smart info option in paragraph] inside the section , then refered in the Smart Info control in the action side, so when "?" help icon clicked it should show the paragraph text inside the section which is referred in Smart Info.
But I am getting "Can not render section" as shown in attached file[ see the image attached with this] , please help me .
Advance thanks, Appreciated
This comment has been branched out as a new node and the new thread can be followed here
Since this question is a specific use case, it is best addressed over an individual post. We have created a new post for you! Please click the below link to update your post and continue the discussion.