Expand my Community achievements bar.

SOLVED

Customize start workflow under page information

Avatar

Level 3

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-...

 

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?

 

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
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.

View solution in original post

10 Replies

Avatar

Community Advisor

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

 

arunpatidar_0-1716967744897.png


which screen are you looking to make title mandatory



Arun Patidar

Avatar

Community Advisor

Hi @sagarkmr0915 ,

Steps to Customize the Workflow Title Field

  1. 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.

  2. 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("");
            }
        }
    });
});

 

  1. 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.



Avatar

Level 3

Hi @HrishikeshKa ,

 

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?

Avatar

Community Advisor

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:

  1. Overlay the Dialog: Overlay the start workflow dialog under /apps to customize it.

  2. Modify the Dialog: Add a unique ID or class to the workflow title field in the overlayed dialog.

  3. 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.

  4. Define the Client Library: Define the client library in the .content.xml file.

  5. 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.

  6. 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.

Avatar

Level 3

@HrishikeshKa - 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.

Avatar

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.

Avatar

Level 3

Yes @Shashi_Mulugu .

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

Avatar

Correct answer by
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.