Dojo Inline Edit Builder

 

+

Search Tips   |   Advanced Search

 

 

Overview

The Dojo Inline Edit Builder allows you to add editing capabilities to a Data Page field so that it initially appears as read only text. The text can be edited by clicking a pencil edit icon next to the text field. Once editing is complete, the user has the option to cancel the changes or save the results either to the page (as a hidden input) or submit the outer form.

 

Using the Dojo Inline Edit Builder

A typical use for this builder is on a non-editable page, such as a table of data that has been created using the Factory's Page Automation.

1. Create a model that leverages Page Automation to generate the application's user interface.

2. Add the Dojo Inline Edit Builder to your model and select the desired data page field for the Fields value.

3. Run the model on your server and see that the target field displays the edit icon next to it. In the following example, the Quantity field is editable.

   Order ID	Date ordered	Status	Quantity	Amount	Shipped
   008731	06/16/2002	Shipped	76	790.98	Yes
   000715	02/12/2000	Out of stock	4	457.72	No
   005978	05/01/2001	In process	38	287.51	No
   009532	09/02/2001	Returned	8	790.98	Yes
   001350	10/21/2001	Shipped	58	790.98	Yes

4. Click the edit icon and verify that we can enter text in the field and either cancel or save your changes using the icons provided. In the following example, the first field under Quantity is opened for editing and the cancel and save icons are displayed.

   Order ID	Date ordered	Status	Quantity	Amount	Shipped
   008731	06/16/2002	Shipped	76	790.98	Yes
   000715	02/12/2000	Out of stock	4	457.72	No
   005978	05/01/2001	In process	38	287.51	No
   009532	09/02/2001	Returned	8	790.98	Yes
   001350	10/21/2001	Shipped	58	790.98	Yes

 

Specifying inputs

This builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see Using the Builder Call Editor.

Input name	Description
Name	Enter a name for this builder call. The designer tool displays this name in the builder call list.
Fields	Select the data page fields you wish to enable for inline edit... [page1]page1/RowSet/Row/QUANTITY
Submit Form	If checked, this input enables the save image button on the inline edit control to submit the surrounding form. If this input is unchecked, supply your own form submit in order to save any changed values back to the server.
Action	model action to call when the form is submitted. This input is available only when Submit Form is checked.
Post-Action Behavior
Post-Action Behavior	Select what should happen after the target action is completed. Default In most cases this displays the output generated by the action. One exception to this is when the action is run from inside a container that specifies that the outermost page gets rendered after the action runs. In the exception case, default would not display the output, but refresh the outermost page. Refresh specified page location after running action The outermost page is not refreshed. Instead, new HTML for the specified region is re-calculated after the action runs, and this HTML is sent to the client where it replaces the existing HTML. Note that If Ajax is disabled, the default post-action behavior is used without loss of functionality. Ajax enablement is controlled by profiling rather than changing inputs in a large number of builders.
Edit, Save, and Cancel button images
Image	Specify the URL to the default image you want added to the page in the model. An image can be specified in three ways: Absolute: http://myworld.com/~jdoe/mypics/image1.jpg Relative: /files/images/mypics/image1.gif Indirect reference: ${Variables/ImageName}
Hover image	URL to the image displayed during mouse-over. See the Image input for more information.
Pressed image	URL to the image displayed when the image is clicked. See the Image input for more information.
Image Width	Enter image width in pixels.
Image Height	Enter image height in pixels.
Alt Text	Enter alternative text for the image to assist users with impaired vision.
Advanced
Template File	Specify a template file that drives the layout of the inline edit controls. We can create your own template file to provide an alternate layout. However, maintain elements with the following id attribute values: inputContainerNode - The input control element(s) are placed within this element. This is initially hidden. textDisplayNode - The read-only text value that gets displayed in the non-edit mode is placed within this element. This is initially visible. editImageNode - The image tag for the edit icon. This is initially visible. saveImageNode - The image tag for the save icon. This is initially hidden. cancelImageNode - The image tag for the cancel icon. This is initially hidden. For an example, look at this file in the project folder: project_name\WebContent\factory\pages\inline_edit.html