Template Builder V1.5

[fmontes]

Parent Issue

No response

Problem Statement

dotCMS template builder has been a source of frustration for marketers and developers, who struggle to create, edit, and reorganize page templates effectively.

Lack the flexibility to move rows and columns around without breaking the entire template, which leads to wasted time and frustration.

Kapture.2023-03-31.at.19.51.33.mp4

Solution

Ability to reorder actual rows

Kapture.2023-03-31.at.19.55.50.mp4

---

Create rows

Kapture.2023-03-31.at.19.58.34.mp4

---

Add containers

Kapture.2023-03-31.at.20.00.21.mp4

---

Add boxes

Kapture.2023-03-31.at.20.02.07.mp4

---

Everything else like remove fields, add classes to rows and columns, add header, footer, etc... will work the same as it is right now.

JavaScript Library

To build this we're going to use GridStack a JavaScript library to create grids with a lot of features like drag and drop, resize, reorder etc.

I already create a functional proof of concepts, you can download and run this.

To run it same as usual:

1. npm install
2. npm run dev

Download: template-builder.zip

Kapture.2023-03-31.at.20.07.05.mp4

dotCMS Version

master

Proposed Objective

Core Features

Proposed Priority

Priority 2 - Important

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

• Figma Designs
• Figma Prototypes:
  • Add row
  • Add box
  • Add Container
  • Move Row

If you have any problems accessing this Figma files please check in with Melissa Rojas.

Assumptions & Initiation Needs

1. Add header, footer and sidebar will work the same as now
2. Add classes to rows and boxes will work the same with the dialog but will have autocomplete from a JSON file customer will be uploading.
3. Delete anything requires a confirmation.
4. Can we delete rows with boxes inside?

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

Beta Give feedback

1. Template Builder V1.5 #24535
   41 of 41
   Epic OKR : Core Features OKR : Marketing OKR : Sales Priority : 2 High QA : Approved Release : 23.08.16 Team : Lunik Type : Defect +9
2. Template builder create a directive to add containers to a PrimeNg dropdown #24536
   OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
   
3. Template builder research for model sync #24537
   QA : Not Needed Team : Lunik Type : Task +3
   
4. Template builder: how do we replace the content of the added rows or box #24538
   OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : Task +6
5. Template Builder: We are not listing the default container adding a container to some template #24591
   QA : Not Needed Team : Lunik Type : Defect +3
6. Template builder: Add feature flag to enable/disable new version #24819
   OKR : Core Features OKR : Marketing Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +7
   
7. Template builder: Research on Angular + GridStack integration #24820
   OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : Task +6
   
8. Template Builder: create a Nx library to developer this feature #24821
   OKR : Core Features OKR : Marketing Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +7
   
9. Template Builder: Implement component-store for state manegement #24959
   Note to QA OKR : Core Features OKR : Marketing QA : Not Needed Team : Lunik Type : New Functionality +6
   
10. Template Builder: Load Content from the dotCMS Page API #24960
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
11. Template Builder: Implement the Box Component #24979
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
12. Template Builder: Load Rows and Columns from dotCMS Page API #25004
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
13. Template Builder: Save Layout Changes #25006
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
14. Template Builder: Implement Row Component #25014
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
15. Template Builder: Implement "Delete Row" Functionality #25015
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
16. Template Builder: Develop Custom Components #25016
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
17. Template Builder: Support Multing Language #25091
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
18. Template Builder: Small Errors on Component Box #25110
    Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : Defect +5
    
19. Template Builder: Integrate Box Components to Row Component #25131
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
20. Template Builder: Adding a Background Grid Guide for 12 Columns with Gaps #25133
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
21. Template Builder: Add Header and Footer #25152
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
22. Template Builder: Ability to Remove Box #25155
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
23. Template Builder: Can't Save Templates #25157
    Merged OKR : Core Features Priority : 1 Show Stopper QA : Approved QA : Needs Internal Release : 23.06 Team : Falcon Type : Defect +8
24. Template Builder: Add Sidebar Feature #25160
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
25. Template Builder: Make toolbar sticky and add <ng-content> for actions #25163
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
26. Template Builder: Add Classes to Rows and Boxes #25176
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
27. Template Builder: Add Ability to Add Containers #25177
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
28. Template Builder: Implementing New Design Changes #25197
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
29. Template Builder: Implement Theme Selector #25201
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.08.16 Team : Lunik Type : Defect +6
    

    
30. Template Disappearance and Anonymous Renaming After Sequential Edits in 'Browser' and 'Templates' Portlets #25227
    Merged QA : Approved QA : Passed Internal Release : 23.07 Team : Falcon Type : Defect +6
31. Template Builder: Show error message when failing to load containers #25241
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik +5
32. Template Builder: Remove Container from Box Feature #25261
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
33. Template Builder: Ability to Select Container Multiple Times #25262
    OKR : Core Features Priority : 3 Average QA : Not Needed Release : 23.08.16 Team : Lunik Type : Defect +6
    
34. Template Builder: Make Grid Show Only When Resizing a Box #25321
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
35. Template Builder: Adjust the UI for Perfection in Template and Layout Editor #25322
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
36. Template Builder: Error when Loading a Template #25341
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : Defect +5
    
37. Template Builder: Automatically Add System Container to Rows when Dropped #25348
    OKR : Core Features Priority : 3 Average QA : Not Needed Team : Lunik Type : New Functionality +5
    
38. Template Builder: Fix Autosave Feature #25375
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.08.16 Team : Lunik Type : Defect +6
    
39. Template Builder: Fixing Style Class Dialog UI/UX #25376
    Needs Work OKR : Core Features Priority : 3 Average QA : Approved Release : 23.08.16 Team : Lunik Type : Defect +7
    
40. Template Builder: Add System Container and 3 Columns Width to Box #25377
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.08.16 Team : Lunik Type : New Functionality +6
    
41. Template Builder: Fix Template Portlet Issue with Required Field #25381
    OKR : Core Features Priority : 3 Average QA : Approved Release : 23.07 Team : Lunik Type : Defect +6
    

[fmontes]

[bryanboza]

Fixed, since this is the epic we are able to pass it, now this portlet is working, we are just fixing some minor bugs that was reported on new cards.

We can pass this one.