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 support@aimms.comwith questions or suggestions.

Q  &  A