Join us in celebrating the outstanding achievement of our AEM Community Member of the Year!
SOLVED
Display custom messages to end user on AEM UI once after workflow execution is completed
1 Accepted Solution
Correct answer by
Hi @Manohar_Killamsetty
Thinking of this in a top-down manner, first approach that comes into my mind would be:
1. First I would think of how to display in TouchUI the notification message. That would require to develop a custom clientlib, with a JS script that would contain the creation and display of Alert, or a Dialog which will contain your message for the end user.
const displayWorkflowStatus = (workflowStatus) {
let alert = new Coral.Alert().set({
variant: 'info',
content: {
innerHTML: workflowStatus
}
});
let element = document.querySelector('some_page_element');
element.appendChild(alert);
}
2. Second, I would think of a way fit a piece of code in the TouchUI normal functionality. That would imply to register my clientlib to some existing category or listen to some known event. This part I find it a bit tricky, cause I am not sure how to ensure that message will popup no matter where in TouchUI you are. Maybe you can narrow it down to only few screens, and will be easier.
I would try to see if any of these events may help:
In JS I would do smth like:
(function($) {
$(document).on("foundation-contentloaded", function() {
// add here my logic of checking the workflow servlet and display the message
checkWorkflowStatus();
});
})($, $(document));
3. Third I would write an Ajax function in the same clientlib that will periodically call a backend servlet to find out if the workflow is still running or it has ended.
const checkWorkflowStatus = () => {
// check priodically
setInterval(function() {
let workflowStatus = getWorkflowStatus();
displayWorkflowStatus(workflowStatus);
}, 5000);
}
const getWorkflowStatus = () => {
$.ajax({
url: /my/servlet/path,
method: 'GET',
async: false,
dataType: 'text',
timeout: 15000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.done(function(response) {
return JSON.parse(response);
})
.fail(function (jqXHR, textStatus, errorThrown) {
return errorThrown;
});
}
4. Forth, I would write a Sling servlet that would have to check the status of your workflow and return the info to your clientlib: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/ext...
Correct answer by
Hi @Manohar_Killamsetty
Thinking of this in a top-down manner, first approach that comes into my mind would be:
1. First I would think of how to display in TouchUI the notification message. That would require to develop a custom clientlib, with a JS script that would contain the creation and display of Alert, or a Dialog which will contain your message for the end user.
const displayWorkflowStatus = (workflowStatus) {
let alert = new Coral.Alert().set({
variant: 'info',
content: {
innerHTML: workflowStatus
}
});
let element = document.querySelector('some_page_element');
element.appendChild(alert);
}
2. Second, I would think of a way fit a piece of code in the TouchUI normal functionality. That would imply to register my clientlib to some existing category or listen to some known event. This part I find it a bit tricky, cause I am not sure how to ensure that message will popup no matter where in TouchUI you are. Maybe you can narrow it down to only few screens, and will be easier.
I would try to see if any of these events may help:
In JS I would do smth like:
(function($) {
$(document).on("foundation-contentloaded", function() {
// add here my logic of checking the workflow servlet and display the message
checkWorkflowStatus();
});
})($, $(document));
3. Third I would write an Ajax function in the same clientlib that will periodically call a backend servlet to find out if the workflow is still running or it has ended.
const checkWorkflowStatus = () => {
// check priodically
setInterval(function() {
let workflowStatus = getWorkflowStatus();
displayWorkflowStatus(workflowStatus);
}, 5000);
}
const getWorkflowStatus = () => {
$.ajax({
url: /my/servlet/path,
method: 'GET',
async: false,
dataType: 'text',
timeout: 15000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
})
.done(function(response) {
return JSON.parse(response);
})
.fail(function (jqXHR, textStatus, errorThrown) {
return errorThrown;
});
}
4. Forth, I would write a Sling servlet that would have to check the status of your workflow and return the info to your clientlib: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/ext...
