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