[henryjonathanquispe]

Related Tickets & Packages

• https://processmaker.atlassian.net/browse/FOUR-33916

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.

[cypress]

screen-builder    Run #2565

Run Properties:   Passed #2565  •  cee41f7082: FOUR-33916: Promote the Vue Component control to the core Screen Builder

Project	screen-builder
Branch Review	FOUR-33916
Run status	Passed #2565
Run duration	09m 11s
Commit	cee41f7082: FOUR-33916: Promote the Vue Component control to the core Screen Builder
Committer	henryjonathanquispe
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	19
Skipped	0
Passing	392
View all changes introduced in this branch ↗︎

[gproly]

Assuming the new core control (VueRender*) and the package-plg control (VueComponentRenderTemplate) are meant to coexist, the component registration names do not collide. A few issues should be addressed before merge:

1. Rich Text drive-by change

In form-builder-controls.js, FormHtmlEditor was changed from the imported component object to a string ('FormHtmlEditor').

PM4 registers controls with:
this.$refs.renderer.$options.components[rendererBinding] = rendererComponent

Passing a string stores an invalid local component definition. The common path often uses FormHtmlViewer / builder-local imports, so this may not always fail visibly, but it is an unnecessary collateral change and inconsistent with other core controls. Please revert to the imported FormHtmlEditor component.

2. Ambiguous palette labels

Both controls currently use the same label: "Vue component Editor" (core in Content Fields, PLG in TCE Controls). With coexistence, this is confusing for designers. Please differentiate the core label (e.g. "Vue Render") from the PLG/TCE control.

3. Null-safety regression in VueRenderTemplate

data / transientData can now be null when transient/validation data is missing:

• data: getTransientData()
• transientData.get: () => getTransientData()

Previously (and in package-plg) this was guarded with || {}. Templates that read data.foo or use v-model="data" can throw in design/preview before data exists. Please keep data / transientData as an object (|| {}).

[decisions-sonarqube]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
4.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[henryjonathanquispe]

@gproly The 3 observations are valid, I did the update in the PR

[gproly]

Nice to have:
Palette label: The new core control still uses the label "Vue component Editor", same as the package-plg TCE control. With both in the palette, designers cannot tell them apart. Use a distinct label for the core control (e.g. "Vue Render").

Popover text: popoverContent on the new control is copied from Rich Text ("Use a Rich Text Editor to add HTML-formatted"). Update it to describe the Vue template/handler control instead.