Introducing User Input Elements

Introducing User Input Elements

Logi Info
v12.6 - Oct 2018

Page 1

1 | 2 | 3

User Input elements produce input controls, which allow users to interact with applications at runtime. They're often used to often to provide data selection and filtering criteria. This document discusses each of the Logi Info Input elements and topics include: 

 

 

 

About Input Elements

Logi Info Input elements are based on the standard HTML input control types and provide useful interactivity. They can be used to gather user input at runtime in order to login to an application, to filter or restrict data, to modify the style or appearance of a report, to insert new or update existing data, and more.

When you include Input elements in a report definition, a ;<FORM> tag is automatically added to the HTML page generated. Following standard HTML behavior, when a user clicks links or buttons that reload the report or pass control to another definition, the form is submitted, along with all of the input control values that have been entered.

 When an report page is submitted, the values of all of its Input elements are automatically passed to the next Report or Process definition. DO NOT use Link Parameters to try to pass the entered values - they'll become null.

In the next Report or Process definition, you can access the entered values using Request tokens. For example, if an Input Text element has an element ID of inpLastName, its value is available in the token @Request.inpLastName~.

 Because the values are passed using HTTP POST, they will not appear in the URL. They are clearly shown, however, in the Debugger Trace Page when you turn debugging on, and this is a great tool for determining what's happening with user input values.

Due to the stateless nature of HTML pages, you generally have to submit (or refresh) a page before its value is usable in its own report definition. There are some exceptions to this; it's possible to use JavaScript to get and set the values of Input elements without submitting the page. This, and many other useful techniques, are described in our document Working with User Input Elements.

Our User Input Sample Application is also an good resource. Special mobile input elements are discussed in our Mobile Reports document.

Now let's examine the available Input elements.

  Back to the top

 

Input Hidden

This is the invisible member of the Input elements family, so some might say it's debatable whether it's actually a user input element at all. However, it's extremely useful.
 

Using It

This element does not appear on the report page and has no caption but it can serve either of two purposes:

  1. It can hold any data value that you want to pass discreetly. Because the POST method is used when the current page is submitted, the data does not appear in the URL's query string. Contrast this behavior to a Link Parameter, which is passed as part of the query string and is therefore visible in the browser's URL display. Input Hidden is especially useful when passing data from within data tables to another Report definition or a Process task (see the companion document Working with UI Controls) and its value can be set using JavaScript.
     
  2. It can act as a "change flag", indicating to another Report definition or Process task whether or not any input data has been changed prior to the page being submitted. This can be used with conditional processing to determine, for example, whether or not a database record needs to be updated. For more information see Working with Change Flags in our companion User Input document.

This element's two attributes are required: a unique element ID and a Default Value, which may be set using tokens.
 

Getting Its Data

Input Hidden's value will be available in the next Report or Process task in a @Request token. For example, if the element's ID is set to hdnChangeFlag, then its data will be available in the token @Request.hdnChangeFlag~.
 

More Information

For additional information, see the Element Reference entry for Input Hidden.

  Back to the top

 

Input Text

The next four Input elements all use the same base control: a single-line text input box. The Input Text element is probably the most commonly-used of the group and allows users to type in characters. It looks like this in use:
 

     


Using It

The Input Text element attributes include:
 

Attribute Description

ID

(Required) The element ID, unique within the definition.

Caption

Specifies text that will be displayed to the left of the text input box.

Caption Class

Specifies one or more style sheet classes that will be applied to the element's Caption, if a different class than that applied to the Input element as whole is desired.

Change Flag Element ID

Specifies the ID of an Input Hidden element that will be used as a "change flag".

Class

Specifies one or more style sheet classes to be applied to the entire Input element.

Default Value

Specifies the default value that will appear in the text box. Can be used with tokens to display values from data, or passed from another report or a process. Overrides the Save In Local Storage attribute, so do not use them at the same time.

Format

Specifies a format for the Default Value text displayed. This does not act as a mask (i.e. it does not force entry of characters in a specific pattern) nor does it change the visible data after entry. More information can be found in our Formatting Data document.

Input Maximum Length

Specifies the maximum number of characters than can be entered into the input box. If this is greater than the Input Size value, text will automatically scroll horizontally in the box.

Input Size

Specifies the physical width of the input box, in characters, on the screen.

Placeholder

Specifies the text of a short hint or caption, often used to describe the expected value, that appears within the input box when it's empty. The text is displayed in a gray color and you may care to use it instead of a Caption. The text disappears when data is entered and reappears if the entered data is deleted.

Save In Cookie

When True, stores the data entered by the user in a cookie, named after the element ID. The cookie can then be used to set the element's default value, so that previously entered data is retrieved, by setting the Default Value attribute to @Cookie.myInputId~.

Save In Local Storage

When True, stores the data entered by the user in the browser's "local storage" (if the browser supports this HTML5 technology). Data stored this way is retained between sessions and automatically restored as the Input element's default value when the page is redisplayed. The local storage size limit is approximately 5 MB and all values are stored as strings. Save In Local Storage is overridden by the Default Value attribute. Do not use them at the same time.

Security Right ID

Controls access to this element when using Logi Security. Provide the ID of a Right defined in the application's _Settings definition and only users that have a Role referenced in the Right will be able to view the element. Multiple Right IDs, separated by commas, may be entered.

Tooltip

Specifies text that appears when the user hovers the pointer over the input box. Tokens may be used here.


The Input Text element can be used with the AutoComplete element, to assist users in entering text based on data. This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier.
 

Getting Its Data

The text entered into this element will be available in the next Report or Process task by using an @Request token. For example, if the element's ID is set to txtFirstName, then its data will be available as the token @Request.txtFirstName~.
 

More Information

For additional information, see the Element Reference entry for Input Text.

  Back to the top

 

Input Password

The purpose of this element is to allow the entry of passwords. It's identical to the Input Text element except that it does not show the characters being typed. Instead, a black dot is shown for each character entered. This is a commonly-accepted method of preventing a bystander from reading a password as it's entered.
 



Using It

The Input Password element's attributes are the same as those of the Input Text element and are not repeated here. This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier.
 

Getting Its Data

The text entered into this element will be available in the next Report or Process task by using an @Request token. For example, if the element's ID is set to txtPassword, then its data will be available as the token @Request.txtPassword~.
 

More Information

For additional information, see the Element Reference entry for Input Password.

  Back to the top

 

Input Date

The purpose of this element is to allow the entry of a date or date range. It's similar to the Input Text element and a date can be typed right into it. It can also include an icon or link beside it which allows a date to be selected from a small pop-up calendar.
 


     

In the pop-up calendar, the current date is highlighted with one color and the selected date (or range of dates) is highlighted with another. Colors can be configured with CSS by overriding style classes found in <yourApp>\rdTemplate\rdCalendar\rdDataCalendarStyle.css.
 

Using It

The Input Date element shares many of the attributes of the Input Text element and also has these additional attributes:
 

Attribute Description

Calendar Caption Format

Specifies the format of the text above the popup calendar. Set to None to prevent display of the caption row entirely.

Calendar Link
Calendar Link Class
Calendar Link Type

These three attributes specify the type of popup calendar link, if any, that appears beside the text box. A small calendar image is provided or a custom image or text can be used.

Default Value

Specifies the default date that will appear in the text box. Can be used with @Function.Date~ token to display the current date in Short Date format.

End Date Default Value

Specifies the default value for the "end" date in a date range, if used.

End Date Range Caption

Specifies the caption for the "end" date text box, if used.

End Date Range ID

Specifies the ID to be associated with the "end" date text box, if used. This is the ID that will be used with a @Request token when the page is submitted.

Input Date Reformat

Causes the date entered to be reformatted into one of several formats before being made available as a request variable. More information can be found in our Formatting Data document.

Number of Dropdown Years

Specifies the number of years that will appear in the Year drop-down list in the pop-up calendar associated with the input element. This value creates a range of years with the current year in the middle of the list.

Show Date Range

This attribute causes two text input boxes for dates to be displayed. If the popup calendar feature is used (Calendar Link Type = Image or Text), the first date selected becomes the value for the starting date; the second date selected sets the value for the ending date. Additional attributes are available that allow you to specify a Caption, Default Value, and ID for the second text input box. Dates can range over 1, 2, or 3 months.


The Input Date Calendar element can be added as a child of Input Date and used to configure the pop-up calendar. Input Date Calendar has the same attributes and behavior as the Date Picker element, which is described in the next section of this document.

The control does not provide an "input mask" to control the format of what can be typed into it. Instead, developers must validate the date entered when the page is submitted, using Validation elements, or when various DHTML events occur, using Event Handler elements. See our Working with User Input Elements document for more information about validation and events.

This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier, and a special element, Validation.Date, is available as a child of Input Date, to ensure that a valid value is entered by the user.
 

Getting Its Data

The data placed into this element will be available in the next report or process by using an @Request token. For example, if the element's ID is set to txtHireDate, then its data will be available as the token @Request.txtHireDate~.

If Show Date Range is being used to allow entry of a date range, then the starting date is available using an @Request token that includes the Input Date element's ID, and the ending date is available using an @Request token that includes the ID specified in the End Date Range ID attribute.
 

Globalization and Localization

The format and presentation of calendars and dates varies widely depending on country and/or language. Some aspects of the date-related input elements are controlled by the "preferred language" settings of the browser being used and others may be affected by the default date and time format settings of the client operating system.

At the application level, date-related aspects of your Logi application can also be changed by adding and configuring a Globalization element in the application's _Settings definition. For example, it has two attributes, Default Input Date Format and Default Input Date Reformat, that can be used, if desired, to specify a format with global scope.

Setting the Globalization element's First Day of Week attribute will change the display of the calendars associated with Input elements. If the attribute value is set to 1, then Monday will be the first day in the calendar; the default is Sunday. More information about the Globalization element can be found in our document Internationalization and Localization.

In addition, the browser's preferred language setting will affect the pop-up calendar display and date value format:
 

     

In the examples shown above, a Globalization element has been used to change the first day of the week to Monday and the browser's preferred language has been set first to English and then to French. Notice that the month name and day-of-week abbreviations in the calendar changed based on the browser's preferred language setting.

In addition, the actual value returned after the user clicks on a date, shown below the calendars, also reflects the language preference in any text it contains - "Nov" vs. "nov.". The element's Format attribute, of course, controls the format of the date value returned into the element's input text box after the mouse click.

In a "globalized date" scenario, when passing/submitting dates from your input controls to other definitions for use within tokens, as filters on queries, or within elements such as the Compare Filter, we highly recommend utilizing the ISO 8601 standard date format (yyyy-MM-dd) to avoid any locale/browser date conflicts that might arise. The input element's Input Date Reformat attribute can be used for this purpose.
 

More Information

For additional information, see the Element Reference entry for Input Date.

  Back to the top

 

Date Picker

The Date Picker element displays a calendar on the page, rather than a text input box, and allows the user to select a date. It can be configured to allow selection of a range of dates by selecting the starting and ending date. Its behavior is closely related to the Input Date element's pop-up calendar.
 


     

The current date is highlighted with one color and the selected date (or range of dates) is highlighted with another. Colors can be configured with CSS by overriding style classes found in <yourApp>\rdTemplate\rdCalendar\rdDataCalendarStyle.css.
 

Using It

The Date Picker element shares many of the attributes of other Input elements and also has these additional attributes:
 

Attribute Description

Border

Specifies the width of the border line, in pixels, drawn around the calendar. The default value is 1 pixel.

Calendar Caption Format

Specifies the format of the text above the popup calendar. Set to None to prevent display of the caption row entirely.

Cell Spacing

Specifies the width, in pixels, of the space between calendar cells.

Dropdown Year and Month

Specifies if the calendar header will have a drop-down list for year and month selection, allowing the user to change years and months. When set to False, the drop-down lists are replaced by a caption with the current calendar year and month names. Default: True

End Date Default Value
End Date Range ID

Specifies the default value for the "end" date in a date range and the ID to be used for that value.

Input Date Reformat

Causes the date selected to be reformatted into one of several formats before being made available as a request variable. Date format information relevant to this attribute can be found in our Formatting Data document.

Number of Dropdown Years

Specifies the number of years to be listed in the calendar's Year drop-down list.

Number of Months

Specifies if 1, 2, or 3 monthly calendars are displayed. If Show Date Range (see below) is True, highlighting for selected dates in different months can span the calendars.

Show Date Range

Specifies if a single date can be selected, or if a range of dates can be selected. If set to True, then all days in the range of dates selected will be highlighted. Default: False

Weekday Caption Format

Specifies the format for the weekday name captions that appear across the top of the calendar. The default value is dd, which displays a single letter for each day; use ddd to display a weekday name abbreviation ("Mon"); use dddd to display the full weekday name ("Monday"); and set the value to None to prevent display of the weekday names.

Width
Width Scale

Specifies the width of the element's calendar, in pixels or as a percent of its containing element. If left blank, a default value is automatically applied.


Getting Its Data

The Date Picker automatically adds Input Hidden elements to your definition and they are assigned the date(s) selected in the calendar. The IDs of the Input Hidden elements are based on the ID attributes of the Date Picker element. The selected dates will be available in the next Report or Process task by using an @Request token. For example, if the Date Picker element's ID is set to inpHireDate, then the selected date will be available as the token @Request.inpHireDate~.

If Show Date Range is enabled to allow selection of a date range, then the starting date is available using an @Request token that includes the Date Picker element's ID, as above, and the ending date is available using an @Request token that includes the ID specified in the End Date Range ID attribute.
 

More Information

The globalization and localization information presented about the Input Date element also applies to the Date Picker element.

For additional information, see the Element Reference entry for Date Picker.

  Back to the top

 

Input Email

The purpose of this element is to allow the entry of one or more email addresses. It's similar to the Input Text element and addresses can be typed right into it.
 


     

Using It

This element's attributes are the same as those of the Input Text element with include one additional attribute:
 

Attribute Description

Multiple Addresses

When set to True, multiple email addresses, separated by commas or semi-colons, may be entered.


This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier, and a special element, Validation.Email, is available to ensure that valid email address values are entered by the user.
 

Getting Its Data

The data entered into this element will be available in the next Report or Process task by using an @Request token. For example, if the element's ID is set to inpEmail, then its data will be available as the token @Request.inpEmail~.
 

More Information

For additional information, see the Element Reference entry for Input Email.

  Back to the top

 

Input Number

Available only in Logi Info Mobile Report definitions, this element allows the entry of a number and may trigger a special data entry control in the mobile device interface. Otherwise, it's similar to the Input Text element and numbers can be typed right into it.
 



Using It

This element's attributes are the same as those of the Input Text element.

This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier, and a special element, Validation.Numeric, is available to ensure that valid numeric values are entered by the user.
 

Getting Its Data

The data entered into this element will be available in the next Report or Process task by using an @Request token. For example, if the element's ID is set to inpQuantity, then its data will be available as the token @Request.inpQuantity~.
 

More Information

For additional information, see the Element Reference entry for Input Number.

  Back to the top

 

Input Telephone

Available only in Logi Info Mobile Report definitions, this element allows the entry of a telephone number and may trigger a special data entry control in the mobile device interface. Otherwise, it's similar to the Input Text element and numbers can be typed right into it.
 


     

Using It

This element's attributes are the same as those of the Input Text element. This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier.
 

Getting Its Data

The data entered into this element will be available in the next Report or Process task by using an @Request token. For example, if the element's ID is set to inpCellNo, then its data will be available as the token @Request.inpCellNo~.
 

More Information

For additional information, see the Element Reference entry for Input Telephone.

  Back to the top

 

Input Time

The purpose of this element is to allow the entry of time. It's similar to the Input Text element and a time can be typed right into it. It can also include an icon or link beside it, which allows a time to be selected from a small pop-up panel.
 


     

As shown above, the pop-up panel has separate sections for hours and minutes, and selections are highlighted with a special color. Colors can be configured with CSS by overriding style classes found in <yourApp>\rdTemplate\rdClock\rdTimePickerStyle.css.
 

Using It

This element shares many of the attributes of the Input Text element and also includes these special attributes:
 

Attribute Description

Clock Link
Clock Link Class
Clock Link Type

These three attributes specify the type of popup link, if any, that appears beside the text box. A small clock image is provided, or a custom image or text link may be used.

Default Value

Specifies the default time that will appear in the text box. Can be used with @Function.Time~ token to display the current date in mm:hh:ss format.

Format

Specifies one of the three standard formats (Short, Medium, or Long Time) or your own custom format. More format information can be found in our Formatting Data document.

Input Time Reformat

Causes the time entered to be reformatted into one of several formats before being made available as a request variable.


The Input Time Clock element can be added as a child of Input Time and used to configure the popup panel. Input Time Clock has the following optional attributes:
 

Attribute Description

Clock Caption

Specifies a specific title in the popup panel. Default: Time Picker

Hours Header

Specifies a title for the Hours section. Default: Hours

Minutes Header

Specifies a title for the Minutes section. Default: Minutes

Seconds Header

Specifies a title for the Seconds section. Default: Seconds

Show Minutes

Specifies if the Minutes section is displayed. Default: True

Show Seconds

Specifies if the Seconds section is displayed. Default: False

Time Picker Hours

Specifies the hour scheme: 12-hour, 24-hour, or whatever the browser's Locale setting requires. Default: BrowserLocale


This element can be used by itself or within an Input Grid element to make alignment with other Input elements easier, and a special element, Validation.Time, is available to ensure that a valid time value is entered by the user.
 

Getting Its Data

The data placed into this element will be available in the next report or process by using an @Request token. For example, if the element's ID is set to inpStartTime, then its data will be available as the token @Request.inpStartTime~.
 

Globalization and Localization

The format and presentation of times varies depending on country and/or language. Some aspects of the time-related input elements are controlled by the "preferred language" settings of the browser being used and others may be affected by the default time format settings of the client operating system.

At the application level, time-related aspects of your Logi application can also be changed by adding and configuring a Globalization element in the application's _Settings definition. For example, it has two attributes, Default Input Time Format and Default Input Time Reformat, that can be used, if desired, to specify a format with global scope.

More information about the Globalization element can be found in our document Internationalization and Localization.

In a "globalized time" scenario, when passing/submitting dates and times from your input controls to other definitions for use within tokens, as filters on queries, or within elements such as Condition Filters, we highly recommend utilizing the ISO-standard date format (hh:mm:ss, with leading zeros) to avoid any locale/browser time conflicts that might arise. The input element's Input Time Reformat attribute can be used for this purpose.
 

More Information

For additional information, see the Element Reference entry for Input Time.
 

  Back to top

1 | 2 | 3  

 


© Copyright 2007-2019 Logi Analytics, Inc. All Rights Reserved