How to change the representation of the process in the table on the portal?

Q&A
1

Good day, I have the following question.

Used Bonita version 7.1.0

How to change the representation of the process in the table on the portal?

For example, to display not only the name of the process, version, and description, but the owner of the process, for example.
Also interested in the question whether it is possible to add custom attributes to process and display them as we need to.
This question refers to the display of the list:
table_portal

There is a question about the possibility of modifying the page with a detailed description of the process:
description_page

Can I modify this page? if so, this is done for all processes? Or, you can modify this page for each process?

2

Q1: How to change the representation of the process in the table on the portal?

Everything is possible if you have the source… :slight_smile: See

http://documentation.bonitasoft.com/building-bonita-bpm-source-files-1

You need to find the right form-builder and modify that and then add it to your own system.

That being said…

Q2: but the owner of the process, for example. screen 1:

When you say Owner of the process who do you mean? When creating a process there is no-owner so who?

If permissions are set right, the user should only see the processes that he/she can execute and they will not be able to see anyone elses processes.

Q3: whether it is possible to add custom attributes to process

This is a good idea and I think it is not possible to do as such as is today. My recommendation is as follows:

  1. Create an Idea on the Ideas page and maybe Bonitasoft will add it to a future release.
  2. I would create a Business Process Custom Attributes process of my own to create a table of Custom Attributes and link this by process name. You could do this by processID but as every new version of a process gets a new ID you would be creating lots of duplicate process custom attributes, then again each version might need it’s own custom attributes… You could then reference this accordingly. I would not try to change the underlying databases, that would be an upgrade nightmare.

Q4: There is a question about the possibility of modifying the page with a detailed description of the process:

Two options here:

  1. I would do Q3 for a Process Detailed Description Table, then do Q1 so i could display it, or
  2. as we do use the small description as the enticement and then use the Pool Instantiation Form to give the full process detail. Much less work and easy to accomplish with no issues regarding future software upgrades… :slight_smile:

Q5: Can I modify this page? if so, this is done for all processes? Or, you can modify this page for each process?

Yes, see Q1; Yes if required; or Yes, if required.

That’s all you have to do…OR you could do it this way…

All the above is of course dependent on how you want to do things…the easy way is to do this

  • modify the page by using an injected piece of JavaScript to the main page to perform AJAX calls to get your custom data and then add < div >s etc. to the screen…(you still need to do Q3 though)

This way there is only one entry point to Bonitasoft you have to make, there is no recompiling the code, and you will be able to upgrade easily by adding just the one line… (maybe).

It looks like the page is driven by (though I’m not totally sure) BonitaConsole.html.

Create your own folder in the chain %BonitaSystemRoot%\workspace\tomcat\webapps\MyJS
Add your JavaScript as a file MyJSCode.js
Find BonitaConsole.html in %BonitaSystemRoot%workspace\tomcat\bonita\client\tenants\1\work\theme\portal
Add < script type=“text/javascript” src=“…/…/…/MyJS/MyJSCode.js?v=7.1.2”>

It’s only an idea, and not tested so it may fail first time, good luck

Hope this helps
regards
Seán

3

Hi,

here is the code to get this working…enjoy

console.log("isFormFullyLoaded Function");

//must set a max count
var maxCount = 0;
var isFormFullyLoadedv = setInterval(isFormFullyLoaded,250);

function isFormFullyLoaded(){

//find the Class I want
var x = document.getElementsByClassName("td td_displaydescription td_3 td_last odd even td_displayDescription");

var i;
//test to see if Class is available yet
if (x.length > 0) {
	
	//when found first this to do is clear the timer
	clearInterval(isFormFullyLoadedv);

	//TODO - Your code goes in here
	for (i = 0; i < x.length; i++) {
		
		x[i].style.backgroundColor = "red";
	}
	console.log("x = " + x);
	console.log("i = " + i);

	var node = document.querySelector(".description"),
		ele = document.createElement("div");

	ele.className = "LongDescription";
	ele.innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue lorem at lacinia ultrices. Etiam pulvinar vitae est ac laoreet. Sed et fringilla nisi, ac mattis ipsum. Cras ullamcorper augue ac venenatis varius. Integer auctor auctor porttitor. Aenean enim turpis, semper in libero non, ultrices vulputate mauris. Integer lorem quam, posuere quis neque sit amet, rutrum pretium libero. Suspendisse consectetur porta ultrices. Sed in consequat sapien. Ut id arcu sed sem bibendum sodales. Ut sodales ex ut aliquet laoreet. Morbi interdum suscipit nisl quis dignissim. Ut pellentesque pulvinar ligula ut viverra. Praesent egestas aliquet velit. Ut pharetra dignissim leo vitae";

	node.parentNode.insertBefore(ele, node.nextSibling);
	//TODO - End of your code
	}
else{
	//when Class is nt yet available
	console.log("maxCount = " + ++maxCount + " Not Found!");

	//stop the timer when hitting max Count
	if (maxCount == 10) {
		clearInterval(isFormFullyLoadedv);
	}
}

}.