Skip to main content
Implemented

In-cell Data Bars in WebUI tables

Related products:WebUI
  • September 29, 2023
  • 4 replies
  • 74 views

Forum|alt.badge.img

Could we add gradient progress bars like excel has in the webui tables. Something that would look like this:

 

There is an example of doing this at the following stack-overflow site:

https://stackoverflow.com/questions/4132880/in-cell-data-bars-in-jqgrid-possible-or-not/4133016#4133016

4 replies

gabiservidone
Administrator
Forum|alt.badge.img+6
NewDiscussion ongoing

gabiservidone
Administrator
Forum|alt.badge.img+6
Discussion ongoingOn Backlog

luispinto
AIMMSian
Forum|alt.badge.img+6
  • Customer Success Manager
  • June 11, 2024

Dear @tjokes1 

 

We recently released a new feature in AIMMS that allows you to include html into table cells:

https://documentation.aimms.com/webui/widget-options.html#webui-ishtml

With this you can generate html code to make the same bars as you are showing in your screenshots.

Here is an example:

 

To achieve this I did the following:

  1. Created a string parameter to hold the html with the necessary indexes
  2. Add the html code that I wanted to use. In this case, I used this:
StringParameter sp_barChart {
IndexDomain: (i_index1,i_index2);
Definition: {
if p_productionValues(i_index1,i_index2) then
formatString("
<div class=\"container%s\">
<div class=\"bar%s\"></div>
<div class=\"label%s\">%n%%</div>
</div>

<style>
.container%s {
width: 60px;
height: 20px;
background-color: white;
border: 1px solid #000;
position: relative;
}

.bar%s {
width: %n%%;
height: 100%%;
background-color: green;
position: absolute;
top: 0;
left: 0;
}

.label%s {
position: absolute;
top: 50%%;
left: 50%%;
transform: translate(-50%%, -50%%);
font-family: Arial, sans-serif;
font-size: 16px;
color: black;
}
</style>",
(i_index1 + "" + i_index2),
(i_index1 + "" + i_index2),
(i_index1 + "" + i_index2),

round(p_productionValues(i_index1,i_index2)/$p_max_p_productionValues*100,0),
(i_index1 + "" + i_index2),
(i_index1+ "" + i_index2),

round(p_productionValues(i_index1,i_index2)/$p_max_p_productionValues*100,0),
(i_index1+ "" + i_index2)
)
endif;
}
webui::IsHtml: True;
}

 

If I am honest my code is messy and not very nice, but I hope it illustrates the idea.

You can/should move the css to somewhere else, but to keep it simple, I left in the html.

With this new HTML feature, you can do a lot of modifications and create complex, meaningful interfaces.

Hope it helps.

 


gabiservidone
Administrator
Forum|alt.badge.img+6
On BacklogImplemented

Didn't find what you were looking for? Try searching on our documentation pages:

AIMMS Developer & PRO | AIMMS How-To | AIMMS SC Navigator