Is there an equivalent/alternative in WebUI for the indexed page in WinUI?

Hello Gorkem,

The Tabbed widget and the Named views come to mind:

https://documentation.aimms.com/webui/webui/tabbed-widget.html

They can allow you to switch (programmatically, if you like) between the tab.

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

This allows you to switch between widgets (types, data, etc.).

I am not sure what you mean by "the graphs need to be placed on top of each other.”.

Can you share more on this?

Thanks!

Hi @gorkem, 

I encourage you to try using the new Tabbed widget.

See the demo video below: I create one WebUI page for each of the plants and add the required charts for that plant. On the main page, I added a selection box to choose between the plants. Beneath this selection box, I add the Tabbed widget, where each tab is associated with a plant page.

To avoid showing all the tab headers upfront, I hide them using the widget's settings. Based on the selected plant, I set the appropriate tab to be selected. For example, when Plant A is selected in the SelectionBox, the tab associated with Plant A's page is shown along with its widgets. Similarly, if Plant B is selected, the tab for Plant B's page is displayed with its associated widgets.

I hope this helped.

Thanks,
Madhu Krishnappa
AIMMS WebUI Product Owner

Hello @gorkem 

If I understand correctly, you have a link between the plants and the tanks.

My initial impression would be that you need an element parameter in a selection widget to choose which plant you want and then a subset of tanks that are selected based on this element parameter.

In the widget that you would display the information you would use the subset of tanks and only show those that make sense.

This would not require any Tabbed page since you are only filtering towards the specific set of tanks.

Does it make sense?

Best regards

Hi @gorkem 

I think I am starting to understand your challenge. Is this because you need/want 1 separate bar chart per tank and not all of them in a single chart?

This is how I did it. I first created the following structures in AIMMS to represent the problem and data:

Set s_plants {
    Index: i_plant;
    Definition: {
        ElementRange(
            From    :  1, 
            To      :  3, 
            Incr    :  1, 
            Prefix  :  "Plant-");
    }
}


Set s_tanks {
    Index: i_tank;
    Definition: {
        ElementRange(
            From    :  1, 
            To      :  9, 
            Incr    :  1, 
            Prefix  :  "Tank-");
    }
}


ElementParameter ep_tanksPlant {
    IndexDomain: i_tank;
    Range: s_plants;
    Definition: nth(i_plant, ceil(ord(i_tank)/card(i_plant)));
}


Set s_periods {
    Index: i_period;
    Definition: {
        ElementRange(
            From    :  1, 
            To      :  20, 
            Incr    :  1, 
            Prefix  :  "period-");
    }
}


Parameter p_usage {
    IndexDomain: (i_tank,i_period);
    Definition: round(uniform(0,1),1);
}

Which gives the following parameter that I want to show in a graph:

I added additional identifiers to select, filter tanks and identify which tanks I wish to display. In this case I will display a maximum of 4 tanks on the page:

ElementParameter ep_selectedPlant {
	Range: s_plants;
}


Set s_selectedTanks {
	SubsetOf: s_tanks;
	Index: i_selectedTank;
	Definition: {
		{i_tank | ep_tanksPlant(i_tank) = ep_selectedPlant}
	}
}


ElementParameter ep_firstTank {
	Range: s_selectedTanks;
	Definition: Nth(i_selectedTank, 1);
}


StringParameter sp_firstTank {
	Definition: ep_firstTank;
}


ElementParameter ep_secondTank {
	Range: s_selectedTanks;
	Definition: Nth(i_selectedTank, 2);
}


StringParameter sp_secondTank {
	Definition: ep_secondTank;
}


ElementParameter ep_thirdTank {
	Range: s_selectedTanks;
	Definition: Nth(i_selectedTank, 3);
}


StringParameter sp_thirdTank {
	Definition: ep_thirdTank;
}


ElementParameter ep_forthTank {
	Range: s_selectedTanks;
	Definition: Nth(i_selectedTank, 4);
}


StringParameter sp_forthTank {
	Definition: ep_forthTank;
}

In WebUI page I created 4 bar chart widgets and adjusted the page display to "Layout11”.

I then added the p_usage(i_tank,i_period) in the bar chart and used the slicing to use ep_firstTank for the first widget, etc.

And also for the title, using the sp_firstTank, etc.

The resulting page has 4 widgets that automatically updated based on the selected plant.

This would require you to define the “maximum number of tanks you will have for any plant of course, but it will automatically update based on selection and you do not need.

Some adjustments and thoughts:

1. You could use the hide feature in WebUI to hide the “Empty Barchart” widgets
2. You could extend your page display to be longer in height (with a scroll bar) to create a standard height for bar chart and so that they do not change based on the number of tanks.
3. You could create a “pagination” type solution that allows them to show the first 5 and then the next 5, etc. with some buttons and procedures.
4. You could provide a filter that allows them to choose which Tanks they want to view and you start by population with the first 5 or so

Does this solve it?

That’s great man, thanks a million! I already implemented it.

Is this because you need/want 1 separate bar chart per tank and not all of them in a single chart?

Yes, that was the main challenge and I couldn’t think of using the Nth function which is the game changer here.

I didn’t even need to look at the source code as you explained it so well in your message.

The effort needed to be put in here will be determined by the plant with the maximum number of tanks, but I don’t think this number will be very high (at least much less than the total number of tanks) and thus it’s still a very good solution.

Best,

Gorkem

Glad to have helped @gorkem!

Happy to share the knowledge  @gdiepen  (and surprised I can still teach you some tricks!)