-DetailDisplay {} property group

The DetailDisplay {} properties are located within the display section of the operations page of the WOW Builder. They allow you to automatically control how the and and details screens appear when an application is run. Default values can be overrun by simply changing these properties. There is no coding required to accomplish many common display goals.

The button locations property in the DetailDisplay{} property group allows you to control where you want your buttons located. Default is to be both at the top and the bottom. Below is a data set returned from a WOW operation showing a list of customers. To access the details page, simply click on the view or edit icons at the right of line items as shown here:

The details (Edit Row) screen shows available (buttons) functions in both the top and bottom portions of the screen:

If you want the buttons to appear only at the top, open the operation that is returning the data, scroll down to the properties section and change Button Locations to "top" and update your operation:

Now buttons appear ONLY at the top of the details screen as shown here:

Top Only: DetailDisplay{ ... BUTTON LOCATIONS:top;}

Botton Only: DetailDisplay{ ... BUTTON LOCATIONS:bottom;}

Top and Bottom: DetailDisplay{ ... BUTTON LOCATIONS:top,bottom;}

Similarly, the buttonJustify property in the DetailDisplay{} property group allows you to control whether you want your buttons justified on the right or the left of the screen. The default value is Right.

Below is a simple operation returning a list of inventory:

Changing this simply requires you to open the operation and scroll down to property group section and change the property to DetailDisplay{ ... ButtonJustify: Left;} as shown here:

Now, buttons appear justified on the left side of the detail screen:

Right Only (default): DetailDisplay{ ... BUTTONJustify:;}

Left Only: DetailDisplay{ ... BUTTONJustify:left;}

The Cancel property in the DetailDisplay{} property group is a Boolean (True/False) value. It will allow your users to display a details screen with or without the "Cancel" button as shown in the screen shots above. By default, the "Cancel" button is present. If you want that feature to be unavailable to users, it is necessary to change the detail display cancel to false:

The cancelText property in the DetailDisplay{} property group allows you to control the text within the cancel button. This feature requires WOW V6.6.1 and above:

Above, I have changed the CANCELTXT to DoNotEnter:

The colCnt property in the DetailDisplay{} property group allows you to control the number of columns that are presented within the details screen. You will notice in the screenshot above, there are 2 columns displaying the data. Two columns is the default. If you wish to change this, say to one, you would update this property group with a new integer as shown here:

By default, the WOW builder is set to not allow deletes. This is obviously to protect your data from being accidentally lost from the web app. There may be instances where you want to allow users to delete rows or records from your application.

To do this, navigate to the display section and check the "delete" check box. Then, within the property groups, change DetailDisplay{ ... DELETE:true;}. You may also change the deleteText property in the DetailDisplay{} property group to control what the button reads by entering in the text you wish to display:

You now have your "Erase" button present on the details screen:

When adding data, by default a user can simply click on the insert button at the bottom of the table view as shown below:

This will bring up an entry screen with the options of only "insert" and "cancel":

If users have multiple similar records to insert, it may save time in entry to have an "insert and copy" button available where users would only need to change one or two items in the copied screen, thus saving time in always needing to return to the table to insert new records. To do this, the insertAndCopy property in the DetailDisplay{} property group can be changed to "true":

Similar to insertAndCopy property, the insertAndNew property in the DetailDisplay{} property group would allow users to insert and new record and automatically load a new insert page. This would benefit those entering data with all unique new data with time savings in going back to the table view to insert. To do this, simply change the insertAndNew property to "true":

To change the text of the Insert button, enter what you want the text to day within the insertText property in the DetailDisplay{} property group.

From your running application, navigate to the insert screen at the bottom of the table view to see "Insert" has now been changed to "Add".

The labelJustify property in the DetailDisplay{} property group determines the location of the field's label on the detail screen. The default is to the left as shown:

By changing the labelJustify to "top" you will obtain the results below:

The Next and Previous buttons are default set to true and will automatically show up on the detail screens. If you do not want them to show up, change the nextAndPrevious property in the DetailDisplay{} property group to "false".

The nextText property in the DetailDisplay{} property group allows control of the text displayed within the Next button.

If it is necessary to control the width of the details screen, The tableWidth property in the DetailDisplay{} property group allows you to adjust this by entering the number of pixels you desire. Default is set to zero.

You can see below, that the pixels set are likely too wide, but this demonstrates the feature.

The updateText property in the DetailDisplay{} property group allows control of the text displayed on the Update button.

Tags: Button location, button placement, button alignment, change button location, button text