Level 3

Solved

Customize start workflow under page information

Forum|Forum|1 year ago
May 28, 2024
5 replies
1761 views

Hi,

I'm trying to make workflow title field mandatory based on a workflow model selection but my changes are not working. Not sure if i'm editing the right JS

Tried as per below example but doesnt work. I m on AEM 6.5.15

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/make-workflow-title-field-mandatory/m-p/254623

Just for POC tried making below workflow title mandatory with required as true but no luck.

/libs/dam/gui/coral/content/commons/sidepanels/timeline/items/toolbar/items/workflows/items/form/items/workflowtitle

Any suggestions on this will be helpful?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by sagarkmr0915

I was able to resolve by overlaying the below JS. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/actions/WorkflowActivator.js

Thanks everyone.

EstebanBustamante

Community Advisor and Adobe Champion

Hi,

Did you try this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/make-workflow-title-field-mandatory/m-p/254627/highlight/true#M45914 ? (Note it is not the accepted solution)

Esteban Bustamante

arunpatidar

Community Advisor

Hi @sagarkmr0915
The above solution was for the workflow start screen from timeline

which screen are you looking to make title mandatory

Arun Patidar

S

sagarkmr0915Author

Level 3

Hi @arunpatidar,

I was referring to the start workflow option from the AEM page.

HrishikeshKagne

Community Advisor

Hi @sagarkmr0915 ,

Steps to Customize the Workflow Title Field

Overlay the Dialog: First, overlay the dialog you want to customize. The path you mentioned is correct for the "Start Workflow" dialog:
/libs/dam/gui/coral/content/commons/sidepanels/timeline/items/toolbar/items/workflows/items/form/items/workflowtitle
You need to create a similar structure under /apps to overlay it:
/apps/dam/gui/coral/content/commons/sidepanels/timeline/items/toolbar/items/workflows/items/form/items/workflowtitleModify the Dialog: Edit the overlayed dialog to include a unique ID or a class to the workflow title field so that it can be easily referenced in your custom JavaScript.
Add Custom JavaScript: Write custom JavaScript to add the required attribute to the workflow title field based on the workflow model selection. You can create a client library and include it in the page where the dialog is used.
Detailed Example
1. Overlay the Workflow Title Field Dialog
  Copy the required structure from /libs to /apps:
  /apps/dam/gui/coral/content/commons/sidepanels/timeline/items/toolbar/items/workflows/items/form/items/workflowtitle
  Add a Unique ID or Class
  Modify the workflowtitle node (which is a textfield component) to add a unique identifier:

<textfield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="Workflow Title"
    name="./workflowTitle"
    class="custom-workflow-title"/>

Create a Client Library for Custom JavaScript

Create a client library under /apps/clientlibs/<your-clientlib-name> with the following structure:

/apps/clientlibs/custom-workflow
├── js
│   └── custom-workflow.js
├── css
│   └── custom-workflow.css
└── .content.xml

Define the Client Library

Define the client library in the .content.xml:

<jcr:root
    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    categories="[custom.workflow]"
    dependencies="[cq.authoring.dialog]"/>

Write the Custom JavaScript

In custom-workflow.js, add the logic to make the workflow title field mandatory based on the workflow model selection:

$(document).on("foundation-contentloaded", function() {
    // Wait for the dialog to load
    $(".cq-dialog-submit").click(function(event) {
        var workflowModel = $("coral-select[name='./model']").val();
        var workflowTitleField = $(".custom-workflow-title");

        if (workflowModel === "your-specific-workflow-model") {
            if (workflowTitleField.val().trim() === "") {
                // Add required attribute and prevent form submission
                workflowTitleField.attr("required", true);
                workflowTitleField[0].setCustomValidity("Workflow title is required.");
                workflowTitleField[0].reportValidity();
                event.preventDefault();
                event.stopPropagation();
            } else {
                // Remove required attribute
                workflowTitleField.attr("required", false);
                workflowTitleField[0].setCustomValidity("");
            }
        }
    });
});

Include the Client Library
Ensure that your client library is included on the page where the workflow dialog is used. You can do this by adding the client library to the appropriate page component or template.

By following these steps, you should be able to conditionally enforce the required attribute on the workflow title field based on the selected workflow model in AEM 6.5.15. Make sure to adjust the script according to your exact requirements and the structure of your dialogs.

Hrishikesh Kagane

S

sagarkmr0915Author

Level 3

Hi @hrishikeshkagne ,

Upon further debug, looks like start workflow form for the AEM page is created from here.

/libs/cq/gui/components/authoring/workflow/startworkflow/startworkflow.jsp

Custom JS mentioned above would work for this usecase as well?

S

sagarkmr0915Author

Level 3

Hi @sagarkmr0915 ,

Yes, the custom JavaScript mentioned above can be adapted to work with the start workflow form created from /libs/cq/gui/components/authoring/workflow/startworkflow/startworkflow.jsp.

You would follow a similar approach:

Overlay the Dialog: Overlay the start workflow dialog under /apps to customize it.
Modify the Dialog: Add a unique ID or class to the workflow title field in the overlayed dialog.
Create a Client Library for Custom Javascript&colon; Create a client library under /apps/clientlibs/<your-clientlib-name> with the necessary JavaScript file to handle the logic for making the workflow title field mandatory based on workflow model selection.
Define the Client Library: Define the client library in the .content.xml file.
Write the Custom Javascript&colon; In the JavaScript file, add the logic to enforce the required attribute on the workflow title field based on the selected workflow model.
Include the Client Library: Ensure that your client library is included on the page where the start workflow form is used.

By following these steps and adapting the custom JavaScript logic as needed, you should be able to conditionally enforce the required attribute on the workflow title field for the start workflow form in AEM 6.5.15. Make sure to test the implementation thoroughly to ensure it works as expected in your environment.

@hrishikeshkagne - Thanks for the response.

For some reason, the custom JS is not getting invoked.

I think, am missing to add the right categories value for the clientlibs that can invoke the custom the JS logic when submit is selected.

Shashi_Mulugu

Community Advisor

@sagarkmr0915 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

S

sagarkmr0915Author

Level 3

Yes @shashi_mulugu .

Just shared some info as analysed, but still for suggestions for my usecase.

S

sagarkmr0915AuthorAccepted solution

Level 3

I was able to resolve by overlaying the below JS. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/actions/WorkflowActivator.js

Thanks everyone.

Steps to Customize the Workflow Title Field

Detailed Example

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded