Posted: 26 Oct 2019 10:19 EDT Last activity: 24 Mar 2020 11:33 EDT
Ask the Expert - UI Controls, Events & WebSocket with Ashirwad Gupta
Join Ashirwad Gupta (@gupta4) in this Ask the Expert session (4th - 8th Nov) on UI Controls, Events & WebSocket.
Meet Ashirwad: Ashirwad is a Principal Software Engineer at Pegasystems and responsible for UI capabilities in the platform. Ashirwad has close to 8 years of experience, out of which 6 years are as a Front end developer. It is his passion and love to build great products.
Message from Ashirwad: Hi everyone! I'm glad and excited to share my learnings and knowledge on Pega Autogenerated controls, Pega events infrastructure and WebSocket that helps in building the modern applications front end and can transform business operations in a limited timeframe by providing numerous OOTB customizations in a low-code way. I’m looking forward to provide answers to all your queries around Controls, Events and WebSocket and its related functionality.
Hi Ashirvad - As I understood, we can send wesocket messages by using the Publish-Notification method in an activity and consume them by using onload activity in a dynamic layout where we specify the notification channel and filter properties.
Thanks for your question. Unfortunately you cannot use the Pega's websocket infra with your own Front end because the OOTB websocket infra is tightly coupled with the Pega's UI events infra which is used in processing the callback. Also the websocket notifications rely on subscription id which we stamp on the the html tags (like div etc.) during the generation of the components. This subscription id is obtained by calling a java api which again is tightly coupled to Pega OOTB and is not exposed for external use.
After publishin a page to a channel, a dynamic layout (which is subscrubed) will be notified that the channel has a message (on a dynamic layout's setting panel we can specify an action on that event).
But how can we get the data from this page? So far I was able to get insights only using js function and then calling a data transform from it:
and here's the function (with 4 properties I pass to a data transform AddNewJobToMigrationList):
Is there any better way (or ever - any OTHER way) to avoid js function call?
Thanks for your question. The page is published and is received as json. There might be some additional properties also present in the response that is sent to the client and in that case we would not have any clue as which property in json maps to what property in clipboard. So Currently we do not directly convert the json response to clipboard page and we leave it to the developers to define the mapping as you have done in the sample above. The way that you are doing it is the best way to accomplish this.
I have a button on my UI. On click event I have configured two actions.
First action is Run Activity - It will fetch some data and perform some calculations.
Second action is Local Action - (Conditional - When Rule)
The issue here is second action is conditional and it is based on the first action. So my question is after executing the first action how I can refresh the DOM so that newly calculated property will be taken into consideration?
At the moment what happens is it is taking old value which was present while generating the DOM.
For your use case if you have configured a when condition on an action, the when condition needs to be evaluated at the server. Based on the when condition results we decide whether to execute the action or not. Since this decision happens on the server, we need to reload the entire action set again. For your case, where you have an action whose execution depends on some property that is set in the first runActivity, you cannot depend on when condition to conditionally execute your other actions in the same action set. You can rather use otherProperty instead of when rule, which will take an expression as condition and its evaluation happens on client.
We do not have any immediate plans to use the browser notification apis or the other requirements that you have mentioned in your question. But we would like to know your specific use case to understand your scenario better.
The notification apis from browser allows to notify user even if he is on another application. This could be used for urgent events, like incoming interaction from VIP client or something. to get his attention back into Pega.
Could also be used to display error or confirmation messaged, can replaced confirm form, giving user confirmation on his action without the need have a dedicated screen which he needs to close.
But this works only if user is connected to Pega. If user is not connected, today the only way to notify him an action is needed is an email. But automatic emails from systems users tend to put them in a specific folder and not really look at it. So if browser is connecter with service worker we can provide a notification to the user, as long as browser is started, but who is today in office without browser opened ?
Pega recently announced major changes to the UI in 8.4. My understanding is the underlying UI structure will be changed radically with Cosmos. How will we upgrade to 8.4? UI and connectors are the two areas I explain to my clients that will break during an upgrade and given that the entire UI foundation is changing how much of a chore will it be to upgrade from say 8.1 to 8.4? Has anyone at Pega decided what the upgrade path will look like?
Also, any updates on what we can expect for UX functionality in 8.4.
When we say there is a change in UI with Cosmos in 8.4, the reference is to the Cosmos design system that supersedes the UI-Kit design system. There is going to be some effort involved in migration to the new Cosmos system. The level of effort depends on factors like number of case types, overridden rules in UIKit, skin formats that have been customized etc.
The requirement that you have cannot be fulfilled by an Autocomplete because autocomplete design does not have a validation attached to it. And it would not be a good design to have autocomplete validate the inputs as it is meant for the user to enter any text with an additional auto-suggest. In the latest versions of pega we have already introduced a new control i.e. AnyPicker which has the auto-suggest feature and the user cannot pick anything outside the list source.
As part of the accessbility where to change in PEGA 8.3 with the tabindex== "-1" to tabindex="0" other than in HTML
As per our requirement, we need to change the tab index value from "-1" to "0". Where we need to add the Tab index in Section dynamic layout cell properties. Or we need to add the writing JS or CSS code menas. Where we need to call those code. Please help us.
Because of the negative tab index value, In our Pega it is skipping the tab.
Section need to add tab index is for : "pyCaseHeaderTitle "
A cell acts as just a container to the enclosing control, and if the control is having any action then by default we make it focusable. Otherwise without action it does not make sense to have a focus on a div. I am not sure about your specific use case, but in case you have to still provide a tabindex on the cell div, you can write a script and using specific selectors for the cell markup inside your concerned section, you can manipulate the dom to have a tabindex attribute with a value that you desire. This script should be called after onload by providing it as an argument to pega.u.d.attachOnload function.
Today for accessibility there is a ruleset WAI I think, but need to give specifically to users, but if we expose our website to internet, or even manage dynamically if users need that accessibility configuration ? like for the languages ruleset that dynamically load, if we can find something in the user agent that asks for a specific accessibility level and pega automatically loads it ?
There is already an enhancement in pipeline, that removes the dependency on the PegaWAI ruleset and "Enable accessibility add-on" checkbox setting which will solve all those issues that you are talking about.