|
Short Codes |
Below is a list of the short codes supported by Webster+.
Some short codes have contents associated with them. When a short code requires contents, the contents will be represented by the ellipsis ( ) between the starting short code and its terminator [/code], where code is the short code being terminated.
If desired, developers can create their own User-Defined Short Codes.
|
Short Code |
Description |
Options | ||||||
|
[addcalc var ] |
Can be used to add a calculation to a previously defined variable field in the page. The calculation will be done locally on the browser to set/change the value of the specified variable based on a formula and other fields. To specify fields in a grid, you must prefix the field name with the name of the grid, a : (colon), then the name of the field. When referencing fields from a grid, if the targeted var is not also in the same grid, the grid columns will be totaled during the computation. If both the var and referenced field are on the same grid, then the value for the same row will be used. Unlike the calc = option where all variables used in the computation must have been previously defined, using addcalc allows calculations to be added to controls later in the form. The calc= option is required. |
|||||||
|
[addevent field ] |
Can be used to add additional events to previously defined input fields. This can be useful to add events to fields from generic "included" sections on the page where you cannot easily edit/change the field definition. |
|||||||
|
[bind expression$] |
Can be used to insert dynamic "bindable" page data from a string expression into the form. The value derived from evaluating the expression can contain any desired HTML with/without Webster+ short codes to be inserted into the page. Note: |
| ||||||
|
Inserts a button. Generally, an event=xxx option is specified to indicate what event is to occur when the button is pressed. Specifying a link=xxx will result in the targeted URL being presented. If the text=xxx is provided but neither event nor link is specified, pressing the button will generate an event based on the text value in lowercase, replacing all spaces with underscores in the event name. For example, a button with no event or link specified but has text="Save File" will generate a "save_file" event. If the text= is not provided, nor the event or link, nothing will occur when pressing the button. |
class=xxx | |||||||
|
[chart var ] |
Inserts the chart identified by the name indicated in the chart=xxx option from the specified query. The event=xxx, if present, will be generated when the user touches/clicks on a portion of the chart to select it. The variable identified by var will receive the set number, point number, set name and point name, each separated by a tab ($09$) character, corresponding to the portion of the chart selected. Chart size is required. |
|||||||
|
[checkbox var ] [/checkbox] |
Inserts a check box. The value of var specifies the related variable to receive and set the check box value. You can specify an On and Off value for the check box if desired. Default values, if not specified, are Off=0 or On=1. For a Tri-state box, include an "other=xxx" value. Include an onright option to have the check box to the right of the text. |
class=xxx | ||||||
|
Used between the [list] and [/list] short codes to define the columns to display. If a source=xxx option is present, then the value of that field from the source file/list is displayed. If no source=xxx clause is present, you can follow the [col] short code with the HTML (and short codes) to be evaluated and output in the column for each record. |
format=xxx | |||||||
|
[css]...[/css] |
Inserts the contents of the short code into the CSS included with the page. |
| ||||||
|
[cssfile ] |
Inserts a CSS file link into the HTML header. |
|||||||
|
Used to provide inline definition for values in a list where the list data is generally static. If a text=xxx option is specified, its value will be used to define the value for the list. See Data Specifications. |
||||||||
|
[div ] [/div] |
Provides a simple means to wrap HTML within a <div> tag, which then may be stylized by class, size or tip. |
|||||||
|
[depends condition opt...] |
Allows the inclusion of logic on the Web page that will control the display and operation of the various controls based on a condition. Example: If you wanted a delete button (name del_button) not visible unless the clientid$ field is set, your code could include: [depends clientid$="" hide=del_button invert] This logic will then be built into the generated Web page such that it executes locally without server involvement. The "invert" option tells the system that the inverse option is to occur when the condition is false (e.g. the del_button will be shown when clientid$ not null). Valid options are: hide= controlNames show= controlNames disable= controlNames enable= controlNames Where: controlNames is a comma-separated list of control names that will be effected. Only one occurrence of each of the options (hide, show, disable, enable) is allowed. The controlNames can also start with an * (asterisk) followed by a class name to indicate all controls which belong to the specified class are to be effected (e.g. hide=*sales == could be used to hide all controls that have the class "sales"). Note:
|
| ||||||
|
[dragitem value ..] [/dragitem] or [dropitemvalue ..] [/dropitem] |
Defines the items to appear in a drag and drop list. You can use [dragitem] or [dropitem] interchangeably. See Drag and Drop Lists. (The [dragitem] and [dropitem] short codes were added in PxPlus 2022.) |
class=xxx | ||||||
|
[draglist var ..] [/draglist] or [droplistvar ..] [/droplist] |
Inserts a box that contains a series of items that can be dragged and dropped to another drag and drop list or rearranged within the box itself. The parameter var must be a numeric variable that specifies the related variable to receive the memory file that contains the list of items in the box. The contents of the box can be defined by the drag and drop list box source options query=xxx or program=xxx or by inline data consisting of [dropitem] short codes. If the data comes from a program, the program may be something similar to the following where several writes would fill in the memory file: enter DRAGLIST If the data comes from either a query or a program, the records returned must contain the following five fields in order: Value used by the program A drag and drop list will generate its event whenever an item is dropped on it. You can use [draglist] or [droplist] interchangeably. See Drag and Drop Lists. (The [draglist] and [droplist] short codes were added in PxPlus 2022.) |
class=xxx | ||||||
|
Separates the sections of a Web page to be processed based on a prior [if] short code. |
| |||||||
|
[execute code] |
Executes the code provided. |
| ||||||
|
[folder var] [/folder] |
Used to define the portion of the page that is to be placed in a folder. Within the folder, the actual page contents must be started with a [tab] short code, which is used to define the tab title. Multiple formats of tabs are provided. See Folders/Tabs. |
|||||||
|
Start of a form consisting of input controls. When the form data is submitted, it will be passed to the specified program. The program specified can be a string variable or a quoted value. |
||||||||
|
[grid var ..] [/grid] |
Inserts a grid. The value of var must be a numeric variable that will contain the handle to a memory file used to load/access the values in the grid. Each record in the memory file will represent one row in the grid, with fields in the record providing the cell contents. If a program=xxx is provided, it will be called and passed the variable specified and an optional string, which can be set to define the grid. The program is responsible to create and load the memory file with the initial contents of the grid and optionally define the columns. Between the [grid] and [/grid] short codes must be one or more [col] short codes defining the columns in the grid. |
class=xxx | ||||||
|
[hide var ...] |
Inserts the contents of the specified value in a hidden form field. If a value option is specified, the variable will also be set to the value specified. |
|||||||
|
[html asis] [/html] |
Inserts the data between the [html] and its ending [/html] short code directly into the page. If you include the optional keyword asis, then the text data between the short codes will be encoded as HTML. Example: If you wanted to include some bold text, you could code in the HTML input page: [html asis]This is bold[/html] OR [html]<b>This is bold</b>[/html] |
| ||||||
|
[html value] |
Inserts the contents of the specified value as raw HTML into the page. If a class, tip or size option is specified, the data will be presented within a <span> tag. |
|||||||
|
Can be used to conditionalize the inclusion of parts of the Web page. The expression is evaluated, and if it returns a non-zero result, processing of the page continues. If the result is zero, processing skips ahead to the [/if] short code. An [else] short code can be used to provide both true (non-zero) and false (zero) sections of code to be processed. The [if] short code and associated [else] and [/if] can be nested as desired. Note: |
| |||||||
|
Can also use [picture ] if desired. |
Inserts the picture found at either the url=xxx specified or the file=xxx specified into the page. The size=xxx and either the url=xxx or file=xxx options are required. If desired, you can include a link or event option to process clicking on the picture. When using the file=xxx option and the file is not found, the system will use the file found at _noimage.png (as per your application location and prefix rules) or if that does not exist *webster/noimage.png. When the picture is drawn, it will be scaled to fit within the designated region. When using the nocopy option, you can also use the align=xxx option to control where to position the image. By default, the image will be centered within the region specified scaled up or down to fit. If you have an event=xxxxx option on an [image/picture] short code, the event will occur when the image is clicked, and the system will place the name of the variable associated with the image (if any), followed by an @ (at sign), the X/Y relative position within the image that the user clicked, a / (slash), and the dimensions of the image as displayed on the screen into the _changed$ variable. (Support to return the image/picture click location and image size was added in PxPlus 2023.) |
align=xxx | ||||||
|
Inserts the <body> contents of the specified file. The filename can be either a literal (as in "myfile.htm") or a string variable. When using the [template] short code, the filename of * indicates where to insert the original page contents. If filename is null (""), then nothing is included and the short code is ignored. |
||||||||
|
[input var ] |
Inserts an input field. The value of var specifies the related variable to receive and set the current value of the input. If a size= option is provided and has a height specified, the system will generate a <textarea> to allow for multiple lines of input; otherwise, a single line input field is created. The format= option, query= option, and using a numeric variable (var) are valid only for single line inputs. The change event only occurs after input is complete and the user exits the field. When a query= option is specified, a lookup button is placed at the end of the input. Pressing this will launch the specified query in a popup frame, and if a value is returned, the input field will be updated and an event (if present) will be triggered. If a file=xxx option is provided, the system will provide a suggested input list with either the primary key from the specified file or the field identified by the source= clause. For information on supported input types, such as "date", see the type=xxx option. |
align=xxx | ||||||
|
Defines an item inside a [menu] or [menubar] and defines the various menu items the user can select from. If a target=xxx is not specified, the default target from the parent [menu] or [menubar] is used if present; otherwise, the default target will "same" and will cause the current page to be replaced. |
||||||||
|
[jsfile ] |
Inserts a JavaScript file link into the HTML header. |
|||||||
|
Inserts a hyperlink to the URL specified immediately following the link keyword (e.g. [link http://www.yahoo.com]). The data following the [link] short code or provided in a text=xxx option is what will appear in the HTML. A text="" will result in the link itself appearing in the HTML. If desired, you can specify an event=xxx instead of a link to have the system generate what looks like a hyperlink but fires an event instead. A [link] can have a "page:xxxx" or "program:xxxx" as the link specification instead of the normal URLs that start with "http:", "https:", "ftp:" or "mailto:". The keyword 'page' is followed by a : (colon) and the name of the specified page to be loaded. The keyword 'program' is followed by a : (colon) and the name of the specified program to be loaded. Additional URL parameters can follow the page/program name separated by an & (ampersand); e.g. &fieldname$=. Unlike other elements, the default is target=new so links by default will appear on a new tab/window. |
||||||||
|
[list var ..] [/list] |
Inserts a list box. The value of var specifies the related string variable to receive and set the current selection in the list. The contents of the list box can be defined by the list box source (query=, file=, or inline data), and column definitions. See Data Specifications. Three types of lists can be generated. If there are multiple columns of data or any column has a title, a report style list is created. If only one column of data is present and there are no titles, a drop box will be created if no height is specified on the size=xxx option; otherwise, a simple list box will be generated. A list box will generate an event when the current entry in the list is selected by double clicking or, in the case of a Report style list box, the user presses Enter while the list has focus. If you specify a link=xxx, the system will open the link instead of processing an event. The link option may specify a URL with %1 in the URL being replaced by the current list selection. Including the target=popup option will cause the link to appear in a popup frame. The pagerows=nnn option can be used on a [list] short code, which includes a header and columns, to paginate output for a list. |
class=xxx | ||||||
|
[map location ] |
Used to insert a Google map directly into the page. The mapped location can be either the name of a variable that the underlying application will set to an address or a fixed string, such as "25 Centurian Blvd, Markham, Ont". If a variable is specified, its value and any changes to its value made by the application will be reflected in the map. The key=xxxxxx option is required and is used to pass your Google API access key. The location should consist of street address, city, state/province/region, and country (all comma separated). The map will be centered on this position. By default, the zoom level will be set to 12, which provides resolution of a few blocks. In addition, the map will be responsive and allow the user to zoom, pan, set to full screen, along with most other Google map capabilities. If you include the option static, the map will be a fixed image. (The [map] short code was added in PxPlus 2022.) |
|||||||
|
Used to define a menu, which can either be always visible on the screen or displayed in response to a right click. When used as a right click menu, the [menu] short code must have both an id=xxx and a hide option specified. The object for which you want the menu to be associated with must have a menu=xxx option specifying the id of the menu. To define the menu, you need to supply a series of [item] or subordinate [menu] short codes. Alternatively, you can define a menu external of your HTML page in the system menu tables and include a menu=xxx option that defines the key to the menu. The text=xxx or plain text following the short code is only used when defining a sub-menu. The target=xxx option, if specified, defines the default target for all subordinate items in the menu. Note: |
class=xxx | |||||||
|
[menubar ]...[/menubar] |
Used to define a menu bar. It functions the same as [menu] described above but appears as a bar across the page with the items/sub-menu selections lined up horizontally and sub-menus appearing vertically below the bar. |
|||||||
|
[meta ] |
Inserts whatever is supplied ( ) as a <meta> tag in the head of the resultant page. A typical use would be to set a page refresh interval using a meta short code, as in: [meta http-equiv='refresh' content='5'] Where: The '5' indicates the number of second between refreshes. |
| ||||||
|
[msg ] |
Inserts the contents of the message library entry specified into the HTML. The should consist of the parameters to pass to the MSG( ) function. This effectively means [msg "Missing",x$] is the same as [bind (MSG("Missing",x$))]. |
| ||||||
|
[picture
] |
Inserts the picture found at either the url=xxx specified or the file=xxx specified into the page. The size=xxx and either the url=xxx or file=xxx options are required. If desired, you can include a link or event option to process clicking on the picture. When using the file=xxx option and the file is not found, the system will use the file found at _noimage.png (as per your application location and prefix rules) or if that does not exist *webster/noimage.png. When the picture is drawn, it will be scaled to fit within the designated region. When using the nocopy option, you can also use the align=xxx option to control where to position the image. By default, the image will be centered within the region specified scaled up or down to fit. If you have an event=xxxxx option on an [image/picture] short code, the event will occur when the image is clicked, and the system will place the name of the variable associated with the image (if any), followed by an @ (at sign), the X/Y relative position within the image that the user clicked, a / (slash), and the dimensions of the image as displayed on the screen into the _changed$ variable. (Support to return the image/picture click location and image size was added in PxPlus 2023.) |
align=xxx | ||||||
|
[radio var ] [/radio] |
Inserts a radio button. The value of var specifies the related variable to receive and set the radio button value. Multiple radio buttons are tied together by using the same name. The value returned by the radio button is set by value. If no value is specified, the value returned will be the numeric index of the button based on preceding radio buttons of the same name. |
class=xxx | ||||||
|
[rem ] |
Can be used to insert a remark into your HTML page. Its contents are ignored. |
| ||||||
|
[row xxxxx ] [/row] |
Used to define a prompt/value pair as used by the File Maintenance Generator. The value of xxxxx is the prompt and whatever is in the will be used to define the input entry. This will create a row of the prompt and input that is responsive to changes in the screen size. If a class is specified, it is applied to the prompt portion only. If desired, you can include additional short codes in the prompt; however, you must make sure that you escape the square brackets using a backslash, as in: [row "\[symbol user\]UserName"]. |
|||||||
|
[script] [/script] |
Inserts the text between the [script] and its ending [/script] short code directly into the page inside a <script> HTML tag. |
| ||||||
|
Can be used to create blocks of text/controls that will occupy a specified portion of the page width. The value of xxx can be whole, half, third, quarter or flex, indicating how wide the section can be. The class, if specified, will apply to everything inside the section. Multiple sections can be placed across the page until the available space is occupied at which point further sections will start below. For example, you can have 2 half sections, 3 third sections, 4 quarter sections or 1 half and 2 quarter sections. A flex section will occupy the width of the largest element inside the section; thus, the number of flex elements that can appear across the page will vary based on contents. The maxwidth=nnn and minwidth=nnn options can be used to specify the maximum and minimum size of a section. |
||||||||
|
Requires any of the specified security class(es) in order to include the data up to the ending code. If no classes are specified, then the system assumes that the only requirement was to have the user sign on with a valid user ID and Password. If no ending short code is present and the security requirements fail, the complete HTML will be replaced with a security failure error message. |
||||||||
|
Inserts the contents of the specified value. If a class, tip or size option is specified, the data will be presented within a <span> tag. The value= option can be used to define the initial value of the field. |
calc=xxx | |||||||
|
[subttl] [/subttl] |
Can be used to define a sub-title for a portion of the page. The contents of the short code will be displayed using the HTML class of 'fm_subttl', which by default is bold font in a grey rectangle. |
|||||||
|
Inserts 'FontAwesome 4' character/icon at this position. For a list of symbols, visit https://fontawesome.com/v4/icons/. Note: |
||||||||
|
Used to identify the contents of the various tabs inside a folder. The data between the start of the [tab] short code and its ending [/tab] short code defines the tab contents (i.e. the text on the tab). Page contents following the [tab] [/tab] sequence up to the next [tab] or [/folder] short code will be placed on that tab. |
||||||||
|
Indicates that the contents of the page are to be inserted into the HTML found in the filename specified. Templates can be cascaded; that is, a file loaded as a template can itself specify a template. To avoid infinite recursion, there is a 10-level deep limit on templates. If the primary file being bound does not specify a template, the system will check %Webster'Template$, which can be set to define a default template to use. |
| |||||||
|
[tree var ..] [/tree] |
Inserts a list box. The value of var specifies the related variable to receive the channel number containing the tree contents. Whenever the form containing the tree view is submitted, the string variable of the same name (i.e. tree1 and tree1$) will contain the currently selected item in the tree with each level in the tree being separated by a separator character for the file (typically SEP). Three special classes can be specified for the tree view using the class= option (see Tree View Classes):
The tree view contents are defined and supplied by the source (query=, file=, program=, or inline data). The records in the file (or query output) will be used to populate the tree with the first field being the topmost level, the second field the next level, and so on. Should the tree view have check boxes, the last field in the file contains the check box state to be displayed or returned. If the event= is specified, it will be triggered whenever an item is double clicked or, if check boxes are present (cbx class), whenever a check box is changed. By default, the target= for the event will be same page. Note:
|
class=xxx | ||||||
|
[ttl] [/ttl] |
Can be used to define a page title for the page. If no HTML <title> tag exists on the page, the first [ttl] contents will be used. The contents of the short code will be displayed using the HTML class of 'fm_ttl', which by default is bold, larger (120%) font in a grey rectangle. |
|||||||
|
[upload var$ ] [/upload] |
Creates a file upload button/drop region on the form. The variable (var$) provided defines the name of a variable that is to receive the pathname of the file(s) that have been uploaded. Each file name will be terminated by a line feed ($0a$), and the variable will initially be set to null "". Generally, this short code will have an event= associated with it that will be generated once a file has been uploaded. The contents between the [upload] and [/upload] will be displayed on screen to designate the upload button/drop area. |
|||||||
|
[usefile ] |
Can be used to define the default usefile. |
|
For controls such as lists where the system needs a data set, it should be provided using a [data] [/data] short code set.
The [data] short code supports three options:
|
colsep=colsep |
Where: |
|
sep=rowsep |
Where: If no rowsep is provided, then each line following the [data] short code up to the [/data] tag will be considered a unique row. |
|
src=query |
Where: |
The [/data] tag is optional as data will terminate on the [/list].
For multi-column lists, a series of [col] short codes should be provided which define the columns. The [col] options are:
|
|
size=size |
The width portion of the size is used to define column width. |
|
|
class=class |
To define the class to use on the column data. |
Example:
[list Cars$][data rowsep=/]Ford/Gm/Audi/Volvo[/data][/list]
If desired, developers can create their own short codes by starting a short code with an * (asterisk). The text following the * (asterisk) up to the first space must contain the name of a program, and optional entry point, that will be performed. The logic will be passed in the rest of the short code in the variable _code$. The logic should append the desired HTML to the variable _OUT$.
For the purposes of the user-defined short codes, the following methods for the current object (in _obj) can be invoked (they will share current variables with caller):
|
Method |
Description |
|
'Get_Form_var( ) |
Extract form variable from input and load options from _code$ into _opt$[ ] array. |
|
'Get_Options( ) |
Load options from _code$ into _opt$[ ] array. |
|
'Code_Error( ) |
Report error using text loaded in the variable _err$. |
Example:
A short code of [*prog1 Betty$ class=Boop tip="Cartoons are her life"] would PERFORM the program "prog1", passing in the rest of the short code "Betty$ class " in the variable _code$.
The program could either manually parse the rest of the short code or invoke _obj'Get_Form_var( ) to define the variable BETTY$ on the form and load _opt$["class"] and _opt["tip"] from the short code. The program could then append whatever HTML it desired to _OUT$.