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

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?

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!

Thanks @luispinto  for this example showing the usage of the nth function. This is now somewhere on the top in my mental toolbox again instead of all kinds of manual workarounds to achieve this!!

Hi @luispinto,

Sorry for the ambiguity. I meant the data for each tank should be shown on a separate graph in a row-wise layout. For example, let’s say Plant 1 has Tanks A, B, and C, and Plant 2 has Tanks X and Y. Then, if I choose Plant 1 I will see the graphs for its tanks as below.

If I switch to Plant 2 then I will see the graphs for Tanks X and Y.
 

As such, we have lots of plants with different number of tanks. Indexed Page in WinUI had the behavior above -- when you switch between plants, it automatically shows a separate graph for each tank of the selected plant on the same page.

I couldn’t experiment with Tabbed widget as it requires higher version than I am currently using, but none of those you mentioned seem to replicate this behavior, unfortunately.

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