Quite new to this WebUI thing in AIMMS, not so new to AIMMS itself (have done some things with AIMMS before….. ). (Edit: after posting the question, I see the forum classifies me as an AIMMS newcomer …. )
I am starting to understand the whole concept with rows/columns in the layout, but not sure how to solve the following problem:
- I have set the maximum number of columns on the page to 11
- I have created two selection boxes (each 2 columns) and two labels to describe the selection box (also each 2 columns)
- I then added a large table (10 columns)
- Finally, I added another label of 2 columns, defined after the table
Because there are still 3 columns free after the combination of 4 widgets (2x selection and 2x label), AIMMS will place the final label not below the table, but still on the first row, behind the other widgets as you can see in the image below:
Is it possible to work with ‘spacer’ widgets to ensure a certain logical placement of the widget? How can I ensure in the webui that the last label should be placed below the table.
Is the only option to start using the custom position for all widgets? Or would this be solved by using the new experimental Grid Layout?
Best answer by Gertjan
You can ditch the column and row thinking. Indeed, please check out the new Page Layout features we offered as experimental feature in 4.75: https://community.aimms.com/aimms-webui-44/grid-layout-for-beautiful-and-consistent-looking-applications-728. No custom position either anymore.
Had a few calls with customers this week (early adopters) and they loved it and this new feature will help you with questions like you posted above.
- Think about using the side panels as filters; https://design-system.aimms.com/ui-pattern-filter
- Think about using Widget or Page actions; if on details items, the Item actions, see e.g. https://design-system.aimms.com/widget-action-menu
- Think about using the status bar if you like to show some key indicators, see https://design-system.aimms.com/status-bar
All doc on how to build this can be found at https://manual.aimms.com/webui/webui-app-development.html