FOUR-18326 | Implement Layout Application Logic

[mcraeteisha]

Feature

Tickets:
FOUR-18326
FOUR-18328
FOUR-18329

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

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

• The layout is added to the bottom of the screen, enabling the user to arrange the existing information as needed.
• When the screen has more than one page, the changes will be added to the bottom of the current page.

When a user applies only the fields:

• The fields are added to the bottom of the screen, providing the user with flexibility to reposition them as required.
• When the screen has more than one page, the changes will be added to the bottom of the current page.

When applying the complete template:

• The entire template is placed at the bottom of the screen, allowing the user to make further adjustments as necessary.
• When the screen has more than one page, the changes will be added to the bottom of the current page.

How to Test

1. Go to branch task/FOUR-18326 in screen-builder and processmaker.
2. Ensure you have a Screen Template with Custom CSS, Layouts, and Fields 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, Layouts, and Fields.
5. Select 'Layout'.

• When the page reloads, check that the Layout of the screen meets the following requirements:
  • The layout is added to the bottom of the screen, enabling the user to arrange the existing information as needed.
  • When the screen has more than one page, the changes will be added to the bottom of the current page.

6. Select 'Templates'. Select the template card for the Screen Template that has CSS, Layouts, and Fields.
7. Select 'Fields'.

• When the page reloads, check that the Fields of the screen meet the following requirements:
  • The fields are added to the bottom of the screen, providing the user with flexibility to reposition them as required.
  • When the screen has more than one page, the changes will be added to the bottom of the current page.

8. Select 'Templates'. Select the template card for the Screen Template that has CSS, Layouts, and Fields.
9. Select 'CSS', 'Layout', and 'Fields'.

• When the page reloads, check that the CSS, Layout, and Fields of the screen meet the following requirements:
  • The entire template is placed at the bottom of the screen, allowing the user to make further adjustments as necessary.
  • When the screen has more than one page, the changes will be added to the bottom of the current page.

ci:next
ci:screen-builder:task/FOUR-18326
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.

[tokensPM]

QA server K8S was successfully deployed https://ci-addbec5329.engk8s.processmaker.net

[estebangallego]

Works as expected!