2016-09-21 17.01 user interaction in the webui · webinar)layout...
TRANSCRIPT
User interaction in the WebUIWednesday, September 21, 2016Peter Nieuwesteeg
Webinar Layout
> This webinar consists of the following three parts:
> Introduction
>WebUI Forms
> Gantt Chart
Why this webinar?
>We believe that in order to get the most value out of your AIMMS
application the end-users need to interact with the data.
>In this webinar, we will focus on two methods of that interaction:
• Change data consistently by using forms
• Change a schedule via the Gantt Chart.
Example Model
> Throughout this webinar, we will use a model to schedule employees in a store.
> The goal is to find the optimal schedule for a week, considering:• Product Demand over time
• Required staff to handle orders
• Work schedule constraints
Work schedule constraints
>This model contains 5 work schedule constraint:• The minimum length of a shift (MinShiftLength)
• The maximum length of a shift (MaxShiftLength)
• The minimum number of hours per week (MinWeeklyHours)
• The maximum number of hours per week (MaxShiftLength)
• The maximum number of shifts per week (MaxShiftsPerWeek)
>You can use forms to prevent users from providing inconsistent data:• Minimum value is larger than Maximal value
• Minimum weekly hours is larger than MaxShiftsPerWeek * MaxShiftLength
WEBUI FORMS
The concept of forms
>Once you introduce forms into your model, you will work with the following generated
identifiers:• A set of scalars, one for every identifier belonging to this form
• Three procedures to create, save, and delete data.
>As part of the forms setup, you will be asked top create two procedures:• One procedure that validates the data
• One procedure that creates a new element into the set
>These two procedure depends on• An string parameter, indexed over the identifiers belonging to this form, with values
• An string parameter, indexed over the identifiers belonging to this form, with error statuses
A set of (generated) scalars
> These scalar identifiers can be displayed
“scalar” widget in the WebUI.
> You can change the data in this object, without
changing the underlying model identifiers.
Three generated procedures to create, save, and delete data
> <formID>_NewEntry: This procedure empties
the scalar identifiers.
> <formID>_SaveForm: This copies the data from
the scalar identifiers to the model data, if the
data meets the validation rules.
> <formID>_DeleteEntry: This removes the
selected element from the set
One procedure that validates the data
> This procedure has a string parameter, indexed over the identifiers belonging to this form, with values
of the scalars as input and a string parameter, indexed over the identifiers belonging to this form, with
error statuses as output.
> The validation error needs to start with “validation-error”
if Val(EmployeeData('MinShiftLength'))<2 OR Val(EmployeeData('MinShiftLength'))>10 then
validationErrors('MinShiftLength')
:= webui::CreateValidationError("validation-error-not-a-valid-MinShiftLength");
endif;
> The language files can be used to translate “validation-error-not-a-valid-
MinShiftLength” into more user friendly text.
One procedure that creates a new element into the set
> This procedure has a string parameter, indexed over the identifiers belonging to this form, with values
of the scalars as input and a scalar string parameter as output:
> Example
SetElementAdd(
Setname : Allpeople,
Elempar : NewEmployee_ep,
Newname : EmployeeData('EmployeeName'));
NewEmployee := NewEmployee_ep;
Demo AIMMS forms
WebUI Gantt Chart
Visual the results
>Of course, after the model is solved, we want to show the results, and the
Gantt Chart is a very suitable widget for that.
>The Gantt chart widget allows you to visualize a planning• The horizontal axis of the Gantt chart shows a time scale and
• The vertical axis typically shows a set of resources.
• Each bar in the Gantt chart can be identified with a task (or job).
Some features of the Gantt Chart in WebUI
>The rows of the chart are alternately colored white and light grey, to make it easier for the
user to distinguish between consecutive rows.
>Overlapping or partly overlapping bars in the chart are always displayed in such a way that it
is unambiguously clear that they do.
>The tooltip appearing when you hover over a specific bar shows detailed information about
the task.
>The top X-axis annotation intelligently shows the points in time, based on the total time
duration displayed in the chart.
>The bottom X-axis always shows the begin date on the left and the end date on the right. If
you have a chart only showing hours on the top X-axis, the bottom X-axis makes it clear to
which days these hours refer.
How to build a Gantt Chart?
>Every task/job is represented by two data points:• Start time (represented by identifier with “start” in the name)
• Duration (represented by identifier with “duration” in the name)
>Start Time:• Number of hours since Reference Time
• Must be updateable to support dragging
>Duration
• The amount of hours that the job/task takes
• Must be updateable to support dragging
Important Options
>Reference time: The time at which the Gantt Chart axis starts and to which the start time of
the task is related. There are many valid formats, including “2015-04-02” and “2015-04-02
13:04:12”. See http://manual.aimms.com/webui/aimms4/en/topic/gantt-chart-widget for
details.
>Time Resolution in (decimal) hours: This option determines at which position or size the
dragging or resizing of a bar will start and end. • Value of 1 means that bars will start at the beginning of an hour and last one or more hours.
• Value of 0.25 means that bars will start at multiple of 15 minutes and they task/job last a multiple of 15 minutes.
View port
>With the optional “Viewport start time” and “Viewport end time”, you can control the visible time
window of the Gantt Chart.
> In this example, I have create some procedures to modify these times.
Useful feature
> If you have a procedure “UponChange_<IdentifierName>”, AIMMS will run this whenever the value of
identifier <IdentifierName> is changed from within the WebUI.
> I am using this to run a procedure whenever I drag a task/job in the Gantt Chart to a new location. This
will change the variable and the .nonvar status so that it will be fixed the next time the model is solved.
Demo Gantt Chart
Sources of information
>The WebUI documentation contains information over forms as well as the Gantt Chart:
• http://manual.aimms.com/webui/
>This tech blog contains an example of Forms:
• http://techblog.aimms.com/2016/03/10/using-aimms-webui-forms-to-create-and-edit-data/
>Here you can find an different Gantt Chart Example:
• https://github.com/aimms/WebUI-Examples/tree/master/GanttChartExample
You can always email us at [email protected] questions or suggestions.
Q & A