There is a demand for My Tasks, etc. to be displayed on the screens of In-house portals or Web services other than Questetra. It may be the case that if you can check the status of Questetra on the screen of another site, you will not forget to process your My Tasks.
One way to do this is as follows.
(Other methods are more cumbersome than this one.)
- Use a cross-site AJAX request to get Questetra information and embed it in a page
- Allow cross-site AJAX requests in CORS setting on the Questetra side
This article is an example of using CORS (Cross-Origin Resource Sharing) with Questetra. (Learn more about CORS on the MDN page, etc.)
Authentication Method
The point is what authentication method to use when accessing Questetra with an AJAX request. Access to the Questetra API is fundamentally with:
- Basic Authentication
- OAuth2
(M317: Controlling Access by OAuth2 Authorization and Basic Authentication from External) However, the simple authentication method for CORS is to log in to Questetra in another tab and use the cookie authentication.
- Advantages
- Simple to implement
- Since it is assumed that users are logged in to Questetra with their browser, they can seamlessly transition to the Questetra page
- Disadvantages
- Cannot use POST request
- Questetra considers the combination of cookie authentication and cross-site POST request as a CSRF attack so it is rejected
- Cannot use POST request
Sample codes and CORS settings
The page example (HTML) to be placed on the site outside Questetra is as follows. (The code is also published on GitHub.)
<html>
<body>
<div id="authorized">
<h3>My Tasks</h3>
<ul id="allocated">
</ul>
<h3>Offered</h3>
<ul id="offered">
</ul>
</div>
<div id="unauthorized" style="display: none;">
<div>Please log in from the following and refresh the page</div>
<a target="_blank" href="https://online-demo-ja.questetra.net/Login_show">Log-in</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
jQuery(document).ready(() => {
const loadTasks = (selector, reportId) => {
const tasks = jQuery(selector).empty();
fetch(`https://online-demo-en.questetra.net/API/OR/Workitem/list?reportId=${reportId}&limit=20`, {
credentials: 'include'
})
.then(response => {
if(!response.ok) {
jQuery('#unauthorized').show();
jQuery('#authorized').hide();
return Promise.reject('error');
}
return response.json();
})
.then(({count, workitems}) => {
workitems.forEach(workitem => {
const link = jQuery('<a>');
link.append(`${workitem.processModelInfoName} : ${workitem.processInstanceTitle}`);
link.attr('href', `https://online-demo-en.questetra.net/OR/ProcessInstance/view?processInstanceId=${workitem.processInstanceId}&workitemId=${workitem.id}`);
jQuery('<li>').append(link).appendTo(tasks);
});
});
};
loadTasks('#allocated', 'ALLOCATED');
loadTasks('#offered', 'OFFERED');
});
</script>
</body>
</html>The first 20 items from [My Tasks] and [Offered] of the Online Demo platform (https://online-demo-en.questetra.net/) are displayed.
You can check the actual operation by accessing https://questetra.github.io/cors/index-en.html.
(Log in as SouthPole@questetra.com with the password ‘ssssssss’ and then re-access the above URL)
(Or else, access the above URL after logging in to the @ US platform from https://questetra.com/features/demo/.)
On the workflow platform side (https://online-demo-en.questetra.net/), the following CORS settings have been made.
In the [System Settings] > [CORS]
- Enable CORS
- Allowed Origin to send cross-origin requests: Add https://questetra.github.io
- Allowed methods: Check on GET
- Allow sending credentials: Check (to allow cookie transmission)
Points on the Codes
I will describe the HTML code for the page example. It is a simple code of about 50 lines including HTML / Script.
The points of the script are as follows.
fetch(`https://online-demo-en.questetra.net/API/OR/Workitem/list?reportId=${reportId}&limit=20`, {
credentials: 'include'
})credentials: ‘include’ allows cross-site requests to send cookies. Without it, AJAX will not send cookies.
.then(response => {
if(!response.ok) {
jQuery('#unauthorized').show();
jQuery('#authorized').hide();
return Promise.reject('error');
}
return response.json();
})If it is not response.ok, a log in prompt will be displayed (only displaying a link to the login page).
There may be cases other than authentication errors, but this time I will ignore the processing around that.
If you want to try it out you will need to modify the code according to your workflow platform.
Also, regarding the number of items to be acquired, the screen design, and opening in a separate tab when clicking an item, I would like you to arrange it according to your preference.
In this article, I described how to set CORS on the workflow platform and display [My Tasks] etc. on sites other than Questetra.
I hope this will help you.