Addon Component Interface

Assets

Add CSS for the addon

Function: addon_add_css()

Description:
This function adds the CSS file specified in $file to the DOM tree of the generated page.

Arguments:

• $file | Type: string

Returns: string

Add JS for the addon

Function: addon_add_js()

Description:
This function adds the JS file specified in $file to the DOM tree of the generated page.

Arguments:

• $file | Type: string

Returns: string

Add inline CSS for the addon

Function: addon_add_inline_css()

Description:
This function adds the CSS code specified in $style to the DOM tree of the generated page.

Arguments:

• $style | Type: string

Returns: string

Add inline JS for the addon

Function: addon_add_inline_js()

Description:
This function adds the JS code specified in $script to the DOM tree of the generated page.

Arguments:

• $script | Type: string

Returns: string

Layout structures

Add new tab for the addon

Function: addon_add_tab()

Description:
This function will add one tab with the ID of $tab_id, the title contained by $label and the icon specified by $icon_id to the tab list. You can use your own icons, if they are added to the HTML DOM, but a set of icons are already provided. The icons available by default are the following ones:
'logo', 'check', 'cross', 'arrow-left-start', 'arrow-left', 'arrow-right', 'arrow-right-end', 'select', 'date', 'time', 'datetime', 'minus', 'plus', 'info', 'warning', 'success', 'error', 'tip', 'notification', 'settings', 'localization', 'permissions', 'style', 'image', 'remove', 'new-item', 'edit', 'save', 'upload', 'download', 'filter', 'nofilter', 'addon'.

Arguments:

• $tab_id | Type: string
• $label | Type: string
• $icon_id | Type: string

Returns: string

Add new fieldset for the addon

Function: addon_add_fieldset()

Description:
This function will add one fieldset with the ID of $fieldset_id and the title contained by $legend to the tab specified by $tab_id.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $legend | Type: string

Returns: string

Add new row for the addon

Function: addon_add_row()

Description:
This function will add one row with the ID of $row_id to the fieldset specified by $tab_id and $fieldset_id.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string

Returns: string

Add new breakpoint class for the addon, associated with the row

Function: addon_set_row_breakpoint()

Description:
This function controls the row breaking behavior for the row, specified by $tab_id, $fieldset_id and $row_id. $count determines how many elements can be in a row. It can be 1, 2, 3 or 4. If the screen is narrower than $size, then one component will occupy one row, regardless $count. It can be 24, 32, 48, 64, 72, 80 or 92. These values are given in em. If $count is 1, then $size is ignored. Several breakpoints can be given and in that case, the widest $size will be applied which is narrower than the screen.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $count | Type: int | Default: 1
• $size | Type: int / bool | Default: false

Returns: string

Components

For the following functions, it applies to all of them, that the corresponding function will add the comoponent to the row specified by $tab_id, $fieldset_id and $row_id.

It also applies that $element_id will determine the HTML id of the component, $element_name the HTML name if present. And if also present, $label sets the component's primary label and $altlabel the secondary. Furthermore, $value will specify the HTML value, $checked the HTML checked, $maxlength the HTML maxlength and $min, $max and $step the HTML min, max and step.

If the component contains a primary button, then $btntext will determine it's text.

In lists $options will contain the elements of the list and in those cases, $value will hold the selected item's index or - if multiple elements can be selected - the $selected array will hold the indexes. Some lists can have images too. At those lists, you can specify those images via $images (paired up with $options: same index in both equals paired up option and image) and also can set the images to be full-wide of the parent element with $fullwidth_images. Those lists can be images-only too, if $show_labels is set to true.

Some textfield components can prompt suggestions. You can specify the list for it in $datalist_source and if you want to make it dynamic (as in: it will store your entered choices [until page reloads/refreshes]), you can set $dynamic_datalist to true.

Some components has icons. On those components $icon_id will specify which SVG icon will be used for the component. It works as the same at addon_add_tab().

Hidden component

Function: addon_add_Hidden()

Description:
Adds a hidden type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $value | Type: string | Default: ''

Returns: string

Checkbox component

Function: addon_add_Checkbox()

Description:
Adds a checkbox type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $altlabel | Type: string | Default: ''
• $checked | Type: bool | Default: false

Returns: string

Toggle switch component

Function: addon_add_ToggleSwitch()

Description:
Adds a checkbox type input field appears as a toggle switch.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $altlabel | Type: string | Default: ''
• $checked | Type: bool | Default: false

Returns: string

Radio button component

Function: addon_add_Radio()

Description:
Adds a radio type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $altlabel | Type: string | Default: ''
• $checked | Type: bool | Default: false

Returns: string

Textfield component

Function: addon_add_TextInput()

Description:
Adds a text type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $maxlength | Type: int / string | Default: ''
• $datalist_source | Type: string | Default: ''
• $dynamic_datalist | Type: bool | Default: false

Returns: string

Password component

Function: addon_add_PassInput()

Description:
Adds a password type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $maxlength | Type: int / string | Default: ''

Returns: string

Email-field component

Function: addon_add_EmailInput()

Description:
Adds a email type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $maxlength | Type: int / string | Default: ''

Returns: string

Telephone-field component

Function: addon_add_TelInput()

Description:
Adds a tel type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $maxlength | Type: int / string | Default: ''

Returns: string

Searchfield component

Function: addon_add_SearchInput()

Description:
Adds a search type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $maxlength | Type: int / string | Default: ''
• $datalist_source | Type: string | Default: ''
• $dynamic_datalist | Type: bool | Default: false

Returns: string

Color picker component

Function: addon_add_ColorInput()

Description:
Adds a color type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''

Returns: string

URL-field component

Function: addon_add_URLInput()

Description:
Adds a url type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $maxlength | Type: int / string | Default: ''

Returns: string

Integer input component

Function: addon_add_IntegerInput()

Description:
Adds an integer input field which can be stepped by keyboard cursors and the field's incrementor and decrementor buttons. In the input, can be only integers.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $max | Type: int / string | Default: ''
• $min | Type: int / string | Default: ''
• $step | Type: int / string | Default: 1

Returns: string

Number input component

Function: addon_add_NumberInput()

Description:
Adds a number type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Default: ''
• $max | Type: int / string | Default: ''
• $min | Type: int / string | Default: ''
• $step | Type: int / string | Default: 1

Returns: string

Range component

Function: addon_add_RangeInput()

Description:
Adds a range type input field.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Default: ''
• $max | Type: int / string | Default: ''
• $min | Type: int / string | Default: ''
• $step | Type: int / string | Default: 1

Returns: string

Textarea component

Function: addon_add_TextArea()

Description:
Adds a textarea.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''

Returns: string

Selectable list component

Function: addon_add_Select()

Description:
Adds a select element.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $options | Type: array | Default: array()
• $value | Type: int | Default: -1

Returns: string

Dropdown list component

Function: addon_add_Dropdown()

Description:
Adds a dropdown list.
$fix_text will determine if the text of the dropdown can be changed or not.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $options | Type: array | Default: array()
• $value | Type: int | Default: -1
• $fix_text | Type: bool | Type: string / bool | Default: false

Returns: string

Button component

Function: addon_add_Button()

Description:
Adds a button type element.
$icon_align will specify where the icon will be shown. Can be 'start' or 'end'. $ghost_text sets the button borderless and backgroundless. $ghost_outline does the same, but only with the background.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $label | Type: string
• $btntext | Type: string
• $color_name | Type: string | Default: 'primary'
• $icon_id | Type: string | Default: ''
• $icon_align | Type: string | Default: 'start'
• $ghost_text | Type: bool | Default: false
• $ghost_outline | Type: bool | Default: false

Returns: string

File upload component

Function: addon_add_FileUpload()

Description:
Adds an input field and a button. The button triggers the WordPress media uploader. After selecting an image in it, the input field will contain the path of the image file.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $btntext | Type: string
• $value | Default: ''

Returns: string

Infobox component

Function: addon_add_InfoBox()

Description:
Adds an infobox which can contain any kind of information.
$closable determines if a close button appears and will make the infobox disappear if clicked. $close_label gives an informal text to screen readers about the function of the close button. $auto_width controls whether the box stretches to full width or it is just as wide as it's contents.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $label | Type: string
• $infotext | Type: string
• $description | Type: string
• $color_name | Type: string | Default: 'primary'
• $icon_id | Type: string | Default: ''
• $closable | Type: bool | Default: true
• $close_label | Type: string | Default: 'Close'
• $auto_width | Type: bool | Default: false

Returns: string

DateTimePicker component

Function: addon_add_DateTimePicker()

Description:
Adds a datetime picker.
$dateformat contains the string what will be used to format the resulting time string. The placeholders inside are '%year', '%month', '%day', '%hour' and '%minute'. $controlled sets if the picker will only appear when triggered by the targeted input (controlled mode) or it will displayed on it's own (standalone mode). $datetimetype sets which fields should be appear. It can be WPCZ_DATETIME_TYPE_DATETIME for both date and time fields or WPCZ_DATETIME_TYPE_DATE for date-only or WPCZ_DATETIME_TYPE_TIME for time-only. $inserttoselector contains the HTML ID of the element into the picker will be inserted if $controlled, or false if it should not. $inserttype specifies how the picker should be inserted. Can be the one of these:

• WPCZ_DATETIME_INSERT_TYPE_BEFORE: will insert outside the element, right before it.
• WPCZ_DATETIME_INSERT_TYPE_AFTER: will insert outside the element, right after it.
• WPCZ_DATETIME_INSERT_TYPE_APPEND: will insert as the last subelement of the element.
• WPCZ_DATETIME_INSERT_TYPE_PREPEND: will insert as the first subelement of the element.

$resultid contains the HTML ID of the element the picked date will be inserted into after applying, or false if it should not. $reverse_mny will reverse the order of the month's and year's fields. $week_enabled enables or disables the displaying of the week field. $prevent_woouflow lets or prevents the picker under or overflow the week of the year: if it is enabled, then an over or underflow will change the year, else the week will be reset to the first/last week of the year. $dtpbutton0, $dtpbutton1, $dtpbutton2 and $dtpbutton3 controls the four controlling button's function. They can be set to:

• WPCZ_DATETIME_BUTTON_TYPE_NONE: Disables the button.
• WPCZ_DATETIME_BUTTON_TYPE_NOW: The now button will set the current date/time.
• WPCZ_DATETIME_BUTTON_TYPE_APPLY: Apply will store the date/time to the field selected by $resultid.
• WPCZ_DATETIME_BUTTON_TYPE_LAST: Last will set to the last stored date/time.
• WPCZ_DATETIME_BUTTON_TYPE_RESET: Reset will set the original date/time.

Due to the controlling nature of the builder algorithm, the buttons can be set to be redundant, but that makes no sense.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id| Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: '1970-01-01 00:00'
• $dateformat | Type: string | Default: '%year-%month-%day %hour:%minute'
• $controlled | Type: bool | Default: false
• $datetimetype | Type: int | Default: WPCZ_DATETIME_TYPE_DATETIME
• $inserttoselector | Type: string / bool | Default: false
• $inserttype | Type: int | Default: WPCZ_DATETIME_INSERT_TYPE_AFTER
• $resultid | Type: bool | Default: false
• $reverse_mny | Type: bool | Default: true
• $week_enabled | Type: bool | Default: true
• $prevent_woouflow | Type: bool | Default: true
• $dtpbutton0 | Type: int | Default: WPCZ_DATETIME_BUTTON_TYPE_NOW
• $dtpbutton1 | Type: int | Default: WPCZ_DATETIME_BUTTON_TYPE_APPLY
• $dtpbutton2 | Type: int | Default: WPCZ_DATETIME_BUTTON_TYPE_LAST
• $dtpbutton3 | Type: int | Default: WPCZ_DATETIME_BUTTON_TYPE_RESET

Returns: string

Radiobutton list component

Function: addon_add_RadioList()

Description:
Adds a list of radio buttons.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $options | Type: array | Default: array()
• $images | Type: array | Default: array()
• $value | Type: int | Default: -1
• $show_labels | Type: bool | Default: true
• $fullwidth_images | Type: bool | Default: false

Returns: string

Checkbox list component

Function: addon_add_CheckboxList()

Description:
Adds a list of checkboxes.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $options | Type: array | Default: array()
• $images | Type: array | Default: array()
• $selected | Type: array | Default: array()
• $show_labels | Type: bool | Default: true
• $fullwidth_images | Type: bool | Default: false

Returns: string

Tag-input component

Function: addon_add_TagInput()

Description:
Adds an input field which can collect a number of words from $min to $max.

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $element_name | Type: string
• $label | Type: string
• $value | Type: string | Default: ''
• $max | Type: int | Default: 255
• $min | Type: int | Default: 0
• $datalist_source | Type: string | Default: ''
• $dynamic_datalist | Type: bool | Default: false

Returns: string

Table component

Function: addon_add_Table()

Description:
Adds a filterable, orderable HTML table which is able to edit the data it handles.
$table specifies the table which will be shown and $key_field will tell the function which field should be used for operations. (This is usually the primary key in the table.) $fields is a string indexed array of arrays, where the keys containing the fields which will be shown in the table and the values are the behavior specifying sub-arrays. Each sub-array can contain the following indexes:

• 'label': The field's label in the table's header.
• 'export_only' is a bool which controls if the field will not show up in the visual table, only in the export dumps.
• 'type' is an int which tells the function what kind of field is this. Can be the following options:
  • WPCZ_WT_TEXT: Textual datafield.
  • WPCZ_WT_BOOL: True/false datafield, will be shown as checkbox.
  • WPCZ_WT_COMBO: List-selectable datafield.
• 'source_type' is an int which is only needed, if 'type' is WPCZ_WT_COMBO. It tells how should the array in 'source' interpreted. Can be the following values:
  • WPCZ_WST_ARRAY: In this case 'source' is a plain numeric array from zero to N and the value of the field will be replaced in the view with the value from this list under the index specified by the field's value.
  • WPCZ_WST_DB: In this case 'source' will specify the other table from which the replacement value will be fetched and contains the following subfields:
    • 'table': The other table.
    • 'key': The field in the other table which will be used to select the record with the current field's value.
    • 'value': The field in the other table which contents will be used to replace the current field's value.
• 'source': Explained above.

$edit_tab_template contains the HTML code of the template which will be used when editing a record in the table. $add_where contains additional conditions for the WHERE clause, which will be concatenated to the automatically generated ones. $offset and $limit sets the OFFSET and LIMIT clauses for the query. $only_tbody will force the function to only generate the TR elements with the record data. Used when changing only the body of the table. (E.g.: filtering, paging, etc. with AJAX or similar.)

Arguments:

• $tab_id | Type: string
• $fieldset_id | Type: string
• $row_id | Type: string
• $element_id | Type: string
• $label | Type: string
• $table | Type: string
• $key_field | Type: string
• $fields | Type: array
• $edit_tab_template | Type: string
• $add_where | Type: string | Default: ''
• $offset | Type: int | Default: 0
• $limit | Type: int | Default: 25
• $only_tbody | Type: bool | Default: false

Returns: string