2016-09-21 17.01 user interaction in the webui · webinar)layout...
TRANSCRIPT
![Page 1: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/1.jpg)
User interaction in the WebUIWednesday, September 21, 2016Peter Nieuwesteeg
![Page 2: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/2.jpg)
Webinar Layout
> This webinar consists of the following three parts:
> Introduction
>WebUI Forms
> Gantt Chart
![Page 3: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/3.jpg)
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.
![Page 4: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/4.jpg)
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
![Page 5: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/5.jpg)
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
![Page 6: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/6.jpg)
WEBUI FORMS
![Page 7: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/7.jpg)
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
![Page 8: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/8.jpg)
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.
![Page 9: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/9.jpg)
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
![Page 10: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/10.jpg)
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.
![Page 11: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/11.jpg)
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;
![Page 12: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/12.jpg)
Demo AIMMS forms
![Page 13: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/13.jpg)
WebUI Gantt Chart
![Page 14: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/14.jpg)
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).
![Page 15: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/15.jpg)
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.
![Page 16: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/16.jpg)
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
![Page 17: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/17.jpg)
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.
![Page 18: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/18.jpg)
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.
![Page 19: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/19.jpg)
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.
![Page 20: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/20.jpg)
Demo Gantt Chart
![Page 21: 2016-09-21 17.01 User interaction in the WebUI · Webinar)Layout >Thiswebinar)consistsof)the)following)three)parts: >Introduction >WebUI Forms >GanttChart](https://reader033.vdocument.in/reader033/viewer/2022041911/5e675df3897d5f1d7b2fdd0b/html5/thumbnails/21.jpg)
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