Thursday, January 30, 2014

Pictures are worth how many words?

iLogic Forms are how you interact with your iLogic models.  They are the user interface that you use to enter parameters, make selections and run rules that are necessary to complete your configuration.  The iLogic Form Editor is the tool that is used to layout and design those forms.  

The main sections of the Form Editor are:

  A) Parameters / Rules / iProperties
  B) Toolbox
  C) Form Design Tree
  D) Properties


The Form Editor uses drag and drop functionality to build a form.  You simply drag items from the Parameters / Rules / iProperties or Toolbox section and drop them on the Form Design Tree.  You then modify the properties of those items using the Properties section.

While it is not necessary to have any rules or parameters before creating a form, it is generally a better workflow to at least have the main parameters created so that you have something to work with.  I generally set the parameters that I’m going to use on my form as Key parameters and use the handy filter in the Form Editor dialog box to easily find them to layout my form (it's in the upper left).

There are a lot of resources for finding information on creating a basic form.  I’d like to focus on one of the tools that isn’t easily understood, Picture and the Picture Folder.
  

Picture

Pictures can be used to display image files such as a company logo.  Acceptable image formats are .bmp, .gif, .png, .jpg, .jpeg & .tiff.  To include a picture in your form, drag the Picture tool from the Toolbox and drop it on your Form Design Tree.  The properties available for a Picture are:
  • Label – This is the name of the image that shows on the Form Design Tree and on the form if you decide to show it.
  • Image – This is where you specify the image file to use.  Click in the Image property and then on the ellipse button to specify the image file.  (Image should be sized before assigning it to the property).
  • Show Label – This is a Boolean property that controls whether or not the Label property is displayed on the form.  If this is set to True then the Text Location property becomes available.
  • Text Location – Only available if the Show Label property is set to True.  This property controls the location of the label on the form.  You can choose from Left, Right, Top & Bottom.
  • Picture Parameter Name – This property is used in conjunction with the Picture Folder property.  Set this property to a Text user parameter with a multi-value list that will control which picture from the picture folder is displayed.
Note:  If the Picture Parameter Name property has a parameter, it will override the image that is selected in the Image property.

Picture Folder

An even better use for pictures is to have them change based upon selections your user makes in the form.  The Picture Folder is used in conjunction with the Picture tool and is used to display multiple images in this manner.  By default, the Picture Folder comes in with 2 possible images but can be increased by dragging more Picture tools into it (just as if you were dragging a Picture tool onto your form).  Each picture that is part of the Picture Folder has two properties to modify:
  • Label – Populate the label property with a possible value for the Text parameter that was used in the Picture Parameter Name property.  This is how you set the link between the property and which image to display. If the value of the Label property does not match a value in the Picture Parameter Name multi-value list, the image will display the text ‘No image data’.
  • Image - This is where you specify the image file to use.  Click in the Image property and then on the ellipse button to specify the image file.

Note:  If you’ve already specified an image file to use and would like to update it, you’ll need to specify it again.  The updated image will not reload automatically.

 
Using Pictures and the Picture folder to drive images based upon selections can really help clarify things for your end user.



In the examples to the left, the user has two different End Designs to choose from.  I'm showing him those different designs using a Picture Folder.









Pictures really are worth 1,000 words!






Bonus tip about using the Properties area of the Form Editor:  You can double click in the box to make it toggle through all available options.  It's sometimes easier and quicker than using the drop down box.



Randy

“We cannot direct the wind but we can adjust the sails.” — Author Unknown