HTML Generation Tool which Helps Your Work Move Right Ahead

Automatically generate HTML for displaying "title banner" on the Operating screen.

Hi, there!


In this article, I am going to introduce a tool (free) which beautifully decorates the Operating Task screen.


We Questetra provide the system “Questetra BPM Suite” as a Cloud service that visualizes the business state of organizations. By utilizing the tool introduced here, I believe that daily work will be improved even a little.


It’s a must see for people who use the Process Modeler of “Questetra BPM Suite”!




==Decoration of the Operatinging screen in HTML==


As I described before in the article “Three HTML Tags That Will Help Your Work Move Right Ahead“, to understand how to decorate an Operating screen, HTML is required.


To decorate the Operating screen, we use “Guide panel type” one of the data types of Data Items. For the explanation of how to use “Guide panel type”, such as where to write HTML, please refer to “Three HTML Tags That Will Help Your Work Move Right Ahead“.


To decorate the screen you need to write in HTML, but to do it is not so easy. It is also very troublesome. The tool I am introducing this time will automatically generate the HTML you need.


==”Title line” to make Operating screen look sharp==


The tool which I am introducing this time generates HTML for displaying a “title line” on the Operating screen.


Here, “title line” is like dividing the Operating screen, it is a thick green horizontal line as shown in the next image.




In the past, I was asked how to display “title lines” like this, the following was my answer.


Please place the Guide panel type Data Item in the place where you want to place the "title line". And please write the following HTML in the "Description" column of the Guide panel type.

<h4 style="background-color:#336600;padding:0.5em;color:#FFFFFF;margin-top:1em;font-size:115%;">= contract info =</h4>

If you want to change the background or text color, change the values of background-color and color. If you want to change the letters, replace the part of "= contract info =" with your own words.


For those of you who do not know HTML, the above explanation must sound like mumbo-jumbo.


So, I have created a tool that automatically generates the above HTML, just by choosing the color of the background and typing in characters. (Actually, another guy did it for me.)


==Tools to generate HTML==


Click here to display the page containing the tool for generating HTML. (New window opens)



With this tool, HTML is automatically generated to display a strip just by choosing the color of the band and characters. It is also possible to specify the edge type of the band and the gap (padding) between characters.


You can also see how the color you choose looks like in the preview area, so it makes it easy to decide the combination of the line and letter color.




Even though it is hard to create HTML yourself, using the (free) tool introduced here makes it easy to prepare HTML without having any HTML knowledge.


By all means, please make use of this tool to make the Operating screen easier to use.


That’s it, for today!




About YAHAGI Hajime

幸せを生み出すITを追求するクエステトラの一味です。 国産の BPM ソフト Questetra BPM Suite で日本・世界を幸せにしたい。
View all posts by YAHAGI Hajime

Prev article - 50. Questetra Tips Automate Processing by Accessing its Own API
Next article - 50. Questetra Tips Can Backlog and Cloud BPM Cooperate?
Another article - YAHAGI Hajime Three HTML Tags That Will Help Your Work Move Right Ahead