Feature

Ticket: FOUR-18323

This PR introduces logic for Applying CSS to Screens via the Screen Templates Panel in screen-builder.

When a user chooses to only apply CSS from a template to their screen:

• If the template introduces CSS elements, they will be added to the existing screen CSS.

• If the template has the same CSS elements as the existing screen, it will replace them with the CSS elements from the template.

• If both, screen and template, share CSS elements but the template adds new styles or properties, they should be added to the existing screen individually.

How to Test

1. Go to branch task/FOUR-18323 in screen-builder and processmaker.

2. Ensure you have a Screen Template with Custom CSS in your environment.

3. Create a new screen in the Screen Builder.

4. Select 'Templates'. Select the template card for the Screen Template that has CSS.

5. Select 'CSS'.

   • When the page reloads, check that the CSS of your screen has been updated with the CSS from your template.

6. Update the CSS in your template and in your screen so that they have the same CSS elements with different properties. For example:
   [selector="my-selector"] {background-color: red;}

   [selector="my-selector"] {background-color: blue; }

7. Save the Screen and the Template.

8. In your Screen, select the template again and select 'CSS'.

   • When the page reloads, check that the CSS in your screen has been replaced by the CSS from your template.

9. Update the CSS in your template and in your screen so that they have the same CSS element with different properties. For example:

   • Screen CSS:
     div > p [selector="test-selector"] { border: 1px solid red; }

   • Template CSS:
     div > p [selector="test-selector"] { background-color: red; font-size: 12px; }

10. Save the Screen and the Template.

11. In your Screen, select the template again and select 'CSS'.

    • When the page reloads, check that the CSS in your screen has been updated like this:
      div > p [selector="test-selector"] { border: 1px solid red; background-color: red; font-size: 12px; }

ci:next
ci:screen-builder:task/FOUR-18323
ci:deploy

Code Review Checklist

• I have pulled this code locally and tested it on my instance, along with any associated packages.
• This code adheres to ProcessMaker Coding Guidelines.
• This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• This solution fixes the bug reported in the original ticket.
• This solution does not alter the expected output of a component in a way that would break existing Processes.
• This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• This ticket conforms to the PRD associated with this part of ProcessMaker.