Do not lose data entered in a case or via modal before exiting (Theme-cosmos - 04-01; pega 24.1.3) - DIRTY

User Experience
1

Hi,

I need to enable “dirty” functionality in my application. This should allow me to:

  • When I modify a field and then exit the case, get a “dirty pega” message
  • When I modify the field and exit the browser, get an alert message
  • When I’m in a case, and I open any type of modal, modify a field in the modal, and then press ESC or X, get a “confirm” alert
  • When I add a row to a table (without using a modal), get the “dirty” message true
  • When I add a row to a table via a modal, get the “dirty” message true
  • When I’m in a modal, if I submit, I should set the case to “dirty”
  • If my case is “dirty” and I save it, I should lose the “dirty” status
  • If my case is “dirty” and I submit, I should lose the “dirty” status only if there are no errors

Any ideas on which pega functions to use?

Thanks for your help

2

@NicolasB3645 I remember early days of Theme-Cosmos, like 8.5, we had a bug with this and tried to fix it but it was a bit like ‘whack a mole’… I’d hope this all works natively nowadays (but its been a while since I’ve worked on Theme-Cosmos). It might be good to check which version of Theme-cosmos UI you are on, this has to be manually updated (from memory) and a lot of project didn’t do this, so it could be working in the latest version. [Updated: I see in your title, you are on Theme-cosmos - 04-01, which is the latest]

I also remember it was VERY important to use the right modal template to launch for Theme-Cosmos in order to get everything working as expected. Although UI Kit templates were in the list, there were specific ones made for theme-cosmos. Unfortunately, I can not find any details on dirty flags or modal templates in my notes to give you specifics, hopefully there are those working in this UI architecture that can share.

I only mention this story as, I would not attempt to manually fix the dirty flag again(caution!).

You might find this pega docs article useful?

1 Like
3

@NicolasB3645 if you are working on theme-cosmos, you might find these useful. I found this list whilst i was unsuccessfully trying to answer your question. It may help you in your future work, until you get to Constellation then we have the Constellation 101 online for you

Title URL
Refreshing files and documents widget in Theme Cosmos https://collaborate.pega.com/discussion/refreshing-files-and-documents-widget-theme-cosmos
Cases/work objects processing behavior and configuration in theme cosmos applications https://collaborate.pega.com/discussion/caseswork-objects-processing-behavior-and-configuration-theme-cosmos-applications
Refresh contents in Theme Cosmos https://collaborate.pega.com/discussion/refresh-contents-theme-cosmos
Theme-Cosmos: Open work object in Full portal on Copy sharable Link https://collaborate.pega.com/discussion/theme-cosmos-open-work-object-full-portal-copy-sharable-link
Limitations of Snapstart url in SPA https://collaborate.pega.com/discussion/limitations-snapstart-url-spa
Theme-Cosmos: Open work object with Full portal in a new window https://collaborate.pega.com/discussion/theme-cosmos-open-work-object-full-portal-new-window
Open Cosmos application multiple times in different browser tabs https://collaborate.pega.com/discussion/open-cosmos-application-multiple-times-different-browser-tabs
Toast Notification in Theme-Cosmos https://collaborate.pega.com/discussion/toast-notification-theme-cosmos
Solution for custom preview panel https://collaborate.pega.com/discussion/how-configure-preview-panel-theme-cosmos https://collaborate.pega.com/discussion/solution-custom-preview-panel
Automatically Render local action UI in a modal in Theme Cosmos https://collaborate.pega.com/discussion/automatically-render-local-action-ui-modal-theme-cosmos
How to configure preview panel in Theme Cosmos https://collaborate.pega.com/discussion/how-configure-preview-panel-theme-cosmos
Case header in Theme Cosmos https://collaborate.pega.com/discussion/case-header-theme-cosmos
How to set width for dialog containers in Theme Cosmos https://collaborate.pega.com/discussion/how-set-width-dialog-containers-theme-cosmos
Archival Case support in Theme Cosmos https://collaborate.pega.com/discussion/archival-case-support-theme-cosmos
How to implement archival cases support in custom application built on theme cosmos https://collaborate.pega.com/discussion/how-implement-archival-cases-support-custom-application-built-theme-cosmos
Switch control in Theme Cosmos https://collaborate.pega.com/discussion/switch-control-theme-cosmos
Customizing the Case Summary panel in Cosmos https://collaborate.pega.com/discussion/customizing-case-summary-panel-cosmos
How to extend the confirm screen in Theme-Cosmos https://collaborate.pega.com/discussion/how-extend-confirm-screen-theme-cosmos
How to generate a toast when processing assignment in Theme Cosmos https://collaborate.pega.com/discussion/how-generate-toast-when-processing-assignment-theme-cosmos
How to update the summary panel of the Cosmos UI inside a case flow action https://collaborate.pega.com/discussion/how-update-summary-panel-cosmos-ui-inside-case-flow-action
How to address styling issues with the case lifecycle widget in Cosmos Theme https://collaborate.pega.com/discussion/how-address-styling-issues-case-lifecycle-widget-cosmos-theme
Make Delegated Data types open in a new window in Theme Cosmos https://collaborate.pega.com/discussion/make-delegated-data-types-open-new-window-theme-cosmos
How to auto-logoff the window for cases open in a new browser tab using Theme-Cosmos https://collaborate.pega.com/discussion/how-auto-logoff-window-cases-open-new-browser-tab-using-theme-cosmos
Preview panel tabs enhancements https://collaborate.pega.com/discussion/preview-panel-tabs-enhancements
Collapse utility panel by default https://collaborate.pega.com/discussion/collapse-utility-panel-default
Customizing the Welcome widget in a Cosmos application https://collaborate.pega.com/discussion/customizing-welcome-widget-cosmos-application
Creating and customizing case tabs in a Cosmos application https://collaborate.pega.com/discussion/creating-and-customizing-case-tabs-cosmos-application
How to drilldown into a chart widget used in the dashboard of a Theme Cosmos application https://collaborate.pega.com/discussion/how-drilldown-chart-widget-used-dashboard-theme-cosmos-application
How to bring back the old attachment utility in Theme Cosmos https://collaborate.pega.com/discussion/how-bring-back-old-attachment-utility-theme-cosmos
Creating status badges https://collaborate.pega.com/discussion/creating-status-badges
OOB Banner classes https://collaborate.pega.com/discussion/user-interface-ootb-banner-helper-classes-pega-85
Helper classes to achieve complex forms using 2-column & 3-column inline wrapping templates https://collaborate.pega.com/discussion/helper-classes-achieve-complex-forms-using-2-column-3-column-inline-wrapping-templates
The dos and don’ts of designing with the Pega Cosmos design system https://community.pega.com/blog/dos-and-donts-designing-pega-cosmos-design-system
Customizing a Cosmos Theme application https://collaborate.pega.com/discussion/customizing-cosmos-theme-application
Performance of Cosmos React, Cosmos Rules and UI-Kit in Pega 8.5.1 and Pega 8.6 https://collaborate.pega.com/discussion/performance-cosmos-react-cosmos-rules-and-ui-kit-pega-851-and-pega-86
What’s New in Theme-Cosmos 03.01 - Pega 8.6 https://collaborate.pega.com/discussion/whats-new-theme-cosmos-0301-pega-86
Migration of Theme-Cosmos 02.01 to 03.01 - Assignments https://collaborate.pega.com/discussion/migration-theme-cosmos-0201-0301-assignments
Migrating existing, simple applications from UI-Kit to Theme Cosmos (Section-based UI) https://collaborate.pega.com/discussion/migrating-existing-simple-applications-ui-kit-theme-cosmos-section-based-ui
Preview panel changes in 8.6 and migration guide https://collaborate.pega.com/discussion/preview-panel-changes-86-and-migration-guide
Migration from Theme-Cosmos 01.01 to 02.01 https://collaborate.pega.com/discussion/migration-theme-cosmos-0101-0201