Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column

palette offers a rich variety of controls that let you create virtually any form. All controls provide functionality as soon as you drop them into your form but need to be customized (edited) to suit the form you are designing.

The purpose of each control is described below.

Column
width400px

On this page:

Table of Contents
maxLevel2

...

Input ControlXML Schema Type
Textxsd:string
Datexsd:date
EMail

types:emailType, an xsd:string restriction pattern defined in  types.xsd.

Moneytypes:number, an xsd:double restriction defined in types.xsd.
Phonetypes:phoneType,  an xsd:string restriction pattern defined in  types.xsd.
Quantityxsd:integer
Numbertypes:number, an xsd:double restriction defined in types.xsd.
T/Fxsd:boolean

The explanations below describe the controls generically—before you edit them to impose additional restrictions or define behavior specific to the form you’re creating.  

...

LDAP customers may have many users/roles configured on their LDAP server. What if the designer wants to pull a list of users or roles from their LDAP server into a form or flow for user selection? Using a traditional dropdown control is not ideal especially when you have thousands of users to pick from. Dropdown control options are confined to a predefined list and maybe limited by the default max result size of an LDAP query. The Combobox control allows users to pick from a predefined list of values or type a value that is not in the list.

 The Combobox is used internally for functions such as creating the Access Control List.

...

Users can typeahead to narrow the choices based on the letters entered. User ids and roles are case sensitive so remember to use the correct case when typing.

The combobox supports the ability to specify single or multiple values. Simply check the single value checkbox if you want to limit the choice to one value.

Image Modified

Info
  1. It is recommended that designers drag and drop Combobox controls from the Palette only when adding this control to forms and flows. Adding a schema that contains a Combobox control as a data source for your form/low may produce unexpected results.
  2. The Combobox control will not work for public forms as the call to find users and roles is secured.

...

The control options default to "true=Yes" and "false=No". When you drag the control from the palette, only the "Yes" option will be visible. You can change the option labels from Yes and No to whatever you want. It is important to note changes to the label for false are irrelevant as it will never be visible on the form. The option values cannot be changed and will always stay as true and false. Blank labels for options are not allowedChecking the “Yes” checkbox of the Boolean control results in a true value in the XML document.

...

Notice the Required (false) property on the T/F Properties pane. This property is unchecked by default. If checked, the XML entry shows a false value even when the T/F value is not selected.

Image RemovedImage Added

 

A T/F control, added to a table, will hide the "Yes" option label. A Boolean checkbox should be used only if there are two states: Y/N. The column header label in the table can help make the choice obvious. For Example, you could create a column header - Non-Smoking Room in the table and if the user checks the box the value will be true and if the box remains unchecked, the value will be false.

...

Let's say you wanted to modify a section of your form to reflect a horizontal layout as shown in the image.

 

One approach would be to use the Table and Radio Controls.  Another alternative is to use a Message control in conjunction with a Radio control to accomplish this. Follow these steps: 

  1.  Use a Message control for the labels Fellowship announcements, Conferences and workshops and Other major news and events

     Image Modified


  2. Place the Radio control with options to its right. 

     Image Modified


  3. Check the Hide Label property of the radio control. 

    Image Modified 


  4. Here is what the form looks like in Use mode: 

    Image Modified

You can use the Message control to center images uploaded to your form. Click here for the details.

...

Choose images that fit sensibly in your form before you upload it. The “regular” form size is 600px. You can resize an uploaded image by selecting the image control in the designer, clicking on the style tab in the properties panel and setting the width.

Centering Images using the Message Control

You can add a Message control on the left side of an image uploaded to your form to center the image. Replace the default text in the message control with one or more spaces. Change its Message Type to None. This will add a blank area on the left of that image and move it into the center. Click the Style tab if you need to modify the width of the message control.

Video Control

This lets you include video files in your form and works the same way as the image control. The control supports .SWF files and other video file formats that are supported by your browser. This control does not allow the designer to resize the video area. If your video is already hosted on another web service it is often best to embed your video into your form using a message control and adding the following html code to that control as shown below:

...

Let's try another example. You are designing a form for mobile devices. You drag and drop one control on the form. Now you want to add the PageBreak control and then add other controls below it. You cannot drop the PageBreak below any control so you will have to add the other controls first and then drop the PageBreak control where you want it. Once you add more than one control to the form, you can drop controls from the palette or the form above or below the page break. You can drag and drop the PageBreak itself anywhere at the root of the form. The PageBreak control should not be dropped inside sections, panels, tables or repeat group controls. The only exception is the Tab control. See below for the details.

...