Skip to content
This repository was archived by the owner on Apr 4, 2025. It is now read-only.

UE: Fixing Buttons in Wizard not visible nor editable in content tree #259

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

UE: Fixing Buttons in Wizard not visible nor editable in content tree #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f0abf80
Fix: Fixing Buttons in Wizard not visible in content tree nor editable
Mar 19, 2025
301b5cc
Test cases fix
Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions blocks/form/components/wizard/wizard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,12 +169,12 @@ export class WizardLayout {

const resetBtn = panel.querySelector('.reset-wrapper');
if (resetBtn) {
wrapper.append(resetBtn);
panel.append(resetBtn);
}

const submitBtn = panel.querySelector('.submit-wrapper');
if (submitBtn) {
wrapper.append(submitBtn);
panel.append(submitBtn);
}
Copy link

@ravise5 ravise5 Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You shouldn't modify the runtime to fix authoring issues.
This change has broken the way submit and reset buttons appear in wizard
https://ue-wizard-buttons--aem-boilerplate-forms--adobe-rnd.aem.page/content/aem-boilerplate-forms-xwalk-collaterals/wizard

Before:
https://main--aem-boilerplate-forms--adobe-rnd.aem.page/content/aem-boilerplate-forms-xwalk-collaterals/wizard

Copy link

@ravise5 ravise5 Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handle this in form-editor-support.js

Copy link
Author

@TalmizAhmed TalmizAhmed Mar 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ravise5 The change in appearance is intentional and it has not broken anything in terms of functionality.
Submit and reset buttons were put into the wrapper that contained next and previous buttons which was excluded from annotation, and so there was no way to delete these components as they were not being rendered in the content tree.
Ideally this should have been appended to the bottom of the wizard as it is being done now. This way, whenever authors add reset/submit buttons in any of the panels of the wizard, they get pulled out and put in the bottom of the wizard, but still inside the runtime scope of the wizard to allow for functioning and deletion to take place.

Copy link

@ravise5 ravise5 Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to discuss if we want to break the existing styling for fixing an authoring issue :)

Copy link

@nit23uec nit23uec Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Submit and reset button should be backed by some jcr resource if we want them to be editable or visible in tree. Can someone explain the exact requirement here?

Copy link

@ravise5 ravise5 Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Context:
@nit23uec
Currently the code in wizard is written such that if a reset or submit button is added it places them in a wrapper.
This wrapper has some css that aligns them in same level. Due to this wrapper annotation is not working for reset or submit added inside a wizard.

Copy link
Author

@TalmizAhmed TalmizAhmed Mar 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jalagari Need your inputs in this

this.assignIndexToSteps(panel);
panel.append(wrapper);
Expand Down
4 changes: 2 additions & 2 deletions test/unit/fixtures/form/claim.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,12 +309,12 @@
<fieldset class="panel-wrapper field-panel-5 field-wrapper" data-id="panelcontainer-1b66045361" id="panelcontainer-1b66045361" name="panel_5"
data-index="4" style="--wizard-step-index: 4;">
</fieldset>
<div class="button-wrapper field-reset1713344016774 field-wrapper reset-wrapper" data-id="reset-0d74964a9e">
<button type="reset" class="button" id="reset-0d74964a9e" name="reset1713344016774">Reset</button></div>
<div class="wizard-button-wrapper">
<div class="button-wrapper field-back field-wrapper wizard-button-prev" data-id="wizard-button-prev"><button type="button"
class="button" id="wizard-button-prev" name="back">Back</button></div>
<div class="button-wrapper field-next field-wrapper wizard-button-next" data-id="wizard-button-next"><button type="button"
class="button" id="wizard-button-next" name="next">Next</button></div>
<div class="button-wrapper field-reset1713344016774 field-wrapper reset-wrapper" data-id="reset-0d74964a9e">
<button type="reset" class="button" id="reset-0d74964a9e" name="reset1713344016774">Reset</button></div>
</div>
</fieldset>
2 changes: 1 addition & 1 deletion test/unit/fixtures/form/docBasedWizardForm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@
<div class="hidden-wrapper field-wrapper" data-fieldset="panel-4" data-id="" data-required-error-message="Please fill in this field." data-required="false"><label for="" class="field-label">I would like to receive Shred-it emails</label><input type="hidden" id="" name="undefined" autocomplete="off" value=""></div>
<div class="checkbox-wrapper field-newslettersignup field-wrapper" data-fieldset="panel-4" data-id="newslettersignup" data-required-error-message="Please fill in this field." data-required="false"><input type="checkbox" value="true" id="newslettersignup" name="newslettersignup" autocomplete="off"><label for="newslettersignup" class="field-label">I would like to receive Shred-it emails</label></div>
</fieldset>
<div class="button-wrapper field-submitbutton field-wrapper submit-wrapper" data-fieldset="panel-4" data-id="submitbutton"><button type="submit" class="button" id="submitbutton" name="submitbutton">Submit</button></div>
<div class="wizard-button-wrapper">
<div class="button-wrapper field-back field-wrapper wizard-button-prev" data-id="wizard-button-prev"><button type="button" class="button" id="wizard-button-prev" name="back">Back</button></div>
<div class="button-wrapper field-next field-wrapper wizard-button-next" data-id="wizard-button-next"><button type="button" class="button" id="wizard-button-next" name="next">Next</button></div>
<div class="button-wrapper field-submitbutton field-wrapper submit-wrapper" data-fieldset="panel-4" data-id="submitbutton"><button type="submit" class="button" id="submitbutton" name="submitbutton">Submit</button></div>
</div>
</fieldset>
<div class="hidden-wrapper field-webform-identifier field-wrapper" data-id="webform-identifier" data-required-error-message="Please fill in this field." data-required="false"><label for="webform-identifier" class="field-label">Webform_Identifier</label><input type="hidden" id="webform-identifier" name="Webform_Identifier" autocomplete="off" value="CUSIT"></div>
Expand Down
Loading