gotoPage property
Introduction
The gotoPage property in WOW is a <div> section of the HTML portion of WOW that contains three parts:
a label
an input field
a submit button
… and is part of the Paging{} property group (PG). The gotoPage feature will allow the user to input an integer into the input field, or textbox, and jump straight to that page, as long as it is within the number of actual pages available.
example: all 3 parts
Here is how the property will look:
Paging{ gotoPage:true; }
By default, the gotoPage is set to FALSE and must be created and set to TRUE to be able to use this feature. Set it to FALSE when you want to turn this feature OFF for the Operation. This must be added to each Operation you desire it to be used in.
Note: The Paging{} elements do not turn or or is not visible, if there is only one page, even if it is enabled or turned on. Try to change the row count to 1 row. This will properly test to ensure it is set up accurately, so long as you have more than one row of data.
This is good to use with the useText and text properties that also belong to the Paging{} Property Group (PG). For the useText and text properties, you can set something up like:
Paging{ useText:true; text: page %variable1 of %variable2; gotoPage:true; }
The preceding properties would lead to something like this on the running operation:
viewing page 1 of 512 Go to page (input integer here) [Go]
The number ‘1’ is representing “%variable1” and ‘512’ is representing “%variable2.” The portion in parenthesis is the gotoPage property displaying a textbox for user input to enter a valid integer of one of the pages out of the 512 total pages. The next portion in brackets is the Go button created to go to that specified page.
Note: A page can contain multiple gotoPage sections. Usually one above and below the table showing the results.
How to create
Go to the Operation you wish to set this up on and go into the Operation Manager in the WOW Builder. Here you will go to the Display settings of the Operation Manager. In this section input the following in the Properties setting:
Paging{ useText: true; text: <some text> variable_1 <some text> variable_2; gotoPage: true; }
example:
Then click the Update button at the top of the Operation Manager.
example: default sets it on the right side of the running Operation.
Left Justify gotoPage property
If you would like to move it to the left side, just add this portion into the Paging{} property.
Justify: left;
Here is what this sample will look like:
Paging{ useText: true; text: <some text> variable_1 <some text> variable_2; gotoPage: true; Justify: left; }
example:
example:
Using CSS
Use CSS to increase the spacing between any two elements, as well as to change the colors, etc. To change the spacing, specify a margin.
For example: To add space between the paging text ("Viewing page 1 of 9") and the gotoPage section, either specify a margin for after the paging text, or for before the gotoPage sub-section.
Note: Most likely you will want to use a value between 3 and 25 pixels.
// After the paging text, specify a margin of 25 pixels.
.pjrp-text { margin-right: 25px; }
// Before the gotoPage section, specify a margin of 15 pixels.
.pjrp-gp { margin-left: 15px; }
Note: If spacing is specified for the gotoPage section, then if the gotoPage section is not visible, the spacing would not be visible either. In this case, there would not be extra spacing between the paging text and whatever comes after the paging text.