OptInputs Module

class epyk.core.html.options.OptInputs.OptionAutoComplete(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property appendTo

Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

Related Pages:

property autoFocus

If set to true the first item will automatically be focused when the menu is shown.

Related Pages:

property classes

Specify additional classes to add to the widget’s elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Related Pages:

property delay

The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

Related Pages:

property disabled

Disables the autocomplete if set to true.

Related Pages:

property minLength

The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

Related Pages:

on_select(js_funcs, profile=None)

Triggered when an item is selected from the menu. The default action is to replace the text field’s value with the value of the selected item.

Related Pages:

Parameters:

  • js_funcs – List | String. Javascript functions.

  • profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

position(my='left top', at='left bottom', of=None, using=None, within=None, collision=None)

Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.

Related Pages:

Parameters:

  • my – String. Optional. Defines which position on the element being positioned to align with the target element.

  • at – String. Optional. Defines which position on the target element to align the positioned element against.

  • of – String. Optional. Which element to position against. If you provide a selector or jQuery object, the first matching element will be used.

  • using – String. Optional. When specified, the actual property setting is delegated to this callback. Receives two parameters:

  • within – String. Optional. Element to position within, affecting collision detection

  • collision – String. Optional. When the positioned element overflows the window in some direction, move it to an alternative position.

property reset
property source

Defines the data to use, must be specified.

Related Pages:

startswith(values: list)

Defines the data to use, must be specified. Only display the values starting with the input text.

Related Pages:

Parameters:

values – The predefined values.

class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property builder

Add a JavaScript Builder function to the options.

This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.

Usage:

but = page.ui.button()
but.options.builder = "Button"
Prop value:

The JavaScript builder function name.

property config_default

The default value for the configuration in case of template.

Default value is an empty string.

Usage:

component.options.config_default = {"value": "test"}
config_html()

Return the HTML options used by the python and passed to the HTML.

Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

config_js(attrs: Optional[dict] = None)

Return the JavaScript options used by the builders functions.

Builder functions can be defined in the framework or external from the various packages.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

Parameters:

attrs – Optional. The extra or overridden options

custom_config(name: str, value: Any, js_type: bool = False)

Add a custom JavaScript configuration.

Usage:

chart = page.ui.charts.apex.scatter()
chart.options.chart.zoom.custom_config("test", False)
Parameters:

  • name – The key to be added to the attributes

  • value – String or JString. The value of the defined attributes

  • js_type – Optional. Specify if the parameter is a JavaScript fragment

details()

Retrieve the defined properties details.

This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.

Usage:

but = page.ui.button()
pprint.pprint(but.options.details(), indent=4)
from_json(vals: dict, schema: Optional[dict] = None)

Load the option schema for a component from a json string.

TODO: add more feature to handle functions and enumeration

Parameters:

  • vals – The input schema

  • schema – The full object schema

has_attribute(cls_obj, name: Optional[str] = None)

Add an extra sub layer to the data structure.

The key in the object representation will be the function name.

Parameters:

  • cls_obj – Class. The sub data class used in the structure definition

  • name – The sub attribute name

isJsContent(property_name: str)

Check if the content of a property is defined to always be a JavaScript fragment.

Thus the framework will not convert it to a Json content.

Usage:

div = page.ui.div()
print(div.options.isJsContent("inline"))
Parameters:

property_name – The property name

property managed

Boolean flag to set if the component needs to be added to the page.

If set to False the component has to be managed manually in the page.

Usage:

but = page.ui.button()
but.options.managed = False
Prop bool:

Flag to specify if this component is automatically managed by the page

optional()

Return all options not added to the HTML component by default.

Those are options which will impact either the Python or the JavaScript builders.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.optional(), indent=4)
property profile

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Flag to display / hide warning logs generated by the framework.

required()

Return all the mandatory / required options with the default values.

Those options are added by the framework to provide a default for the HTML components but they can be changed.

System options are also added to this category as they are always available in any HTML components.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.required(), indent=4)
set_attrs(vals: dict)

Set the object internal attributes.

Parameters:

vals – All the attributes to be added to the component

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

update_config(attrs: dict)

Update the option configuration.

Parameters:

attrs – The attributes to set

property verbose

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Boolean. Flag to display / hide warning logs generated by the framework.

class epyk.core.html.options.OptInputs.OptionsDatePicker(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property altField

An input element that is to be updated with the selected date from the DatePicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

Related Pages:

property altFormat

The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function.

Related Pages:

property appendText

The text to display after each date field, e.g., to show the required format.

Related Pages:

property autoSize

Set to true to automatically resize the input field to accommodate dates in the current dateFormat.

Related Pages:

property beforeShow

A function that takes an input field and current DatePicker instance and returns an options object to update the DatePicker with. It is called just before the DatePicker is displayed.

Related Pages:

property buttonImage

A URL of an image to use to display the DatePicker when the showOn option is set to “button” or “both”. If set, the buttonText option becomes the alt value and is not directly displayed.

Related Pages:

property buttonImageOnly

Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the buttonImage option has also been set.

Related Pages:

property buttonText

The text to display on the trigger button. Use in conjunction with the showOn option set to “button” or “both”.

Related Pages:

property calculateWeek

A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.

Related Pages:

property changeMonth

Whether the month should be rendered as a DropDown instead of text.

Related Pages:

property changeYear

Whether the year should be rendered as a DropDown instead of text. Use the yearRange option to control which years are made available for selection.

Related Pages:

property closeText

The text to display for the close link. Use the showButtonPanel option to display this button.

Related Pages:

property constrainInput

When true, entry in the input field is constrained to those characters allowed by the current dateFormat option.

Related Pages:

property currentText

The text to display for the current day link. Use the showButtonPanel option to display this button.

Related Pages:

property dateFormat

The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.

Related Pages:

property dayNames

The list of long day names, starting from Sunday, for use as requested via the dateFormat option.

Related Pages:

property dayNamesMin

The list of minimised day names, starting from Sunday, for use as column headers within the DatePicker.

Related Pages:

property dayNamesShort

The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat option.

Related Pages:

property defaultDate

Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or null for today.

Related Pages:

property duration

Control the speed at which the DatePicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds (“slow”, “normal”, “fast”).

Related Pages:

property firstDay

Sunday is 0, Monday is 1, etc.

Related Pages:

Type:

Set the first day of the week

property gotoCurrent

When true, the current day link moves to the currently selected date instead of today.

Related Pages:

property hideIfNoPrevNext

Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). You can hide them altogether by setting this attribute to true.

Related Pages:

property inline
property isRTL

Whether the current language is drawn from right to left.

Related Pages:

property maxDate

The maximum selectable date. When set to null, there is no maximum.

Related Pages:

property minDate

The minimum selectable date. When set to null, there is no minimum.

Related Pages:

property monthNames

The list of full month names, for use as requested via the dateFormat option.

Related Pages:

property monthNamesShort

The list of abbreviated month names, as used in the month header on each DatePicker and as requested via the dateFormat option.

Related Pages:

property navigationAsDateFormat

Whether the currentText, prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.

Related Pages:

property nextText

The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.

Related Pages:

property numberOfMonths

The number of months to show at once.

Related Pages:

property onChangeMonthYear

Called when the DatePicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the DatePicker instance as parameters. this refers to the associated input field.

Related Pages:

onClose(values, profile=False)

Called when the DatePicker is closed, whether or not a date is selected. The function receives the selected date as text (”” if none) and the DatePicker instance as parameters. This refers to the associated input field.

Related Pages:

Parameters:

  • values –

  • profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

onSelect(values, profile=False)

Called when the DatePicker is selected. The function receives the selected date as text and the DatePicker instance as parameters. this refers to the associated input field.

Related Pages:

Parameters:

  • values –

  • profile – Boolean | Dictionary. Optional. A flag to set the component performance storage.

property prevText

The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.

Related Pages:

property selectOtherMonths

Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.

Related Pages:

property shortYearCutoff

The cutoff year for determining the century for a date (used in conjunction with dateFormat ‘y’). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century.

Related Pages:

property showAnim

The name of the animation used to show and hide the datepicker. Use “show” (the default), “slideDown”, “fadeIn”, any of the jQuery UI effects. Set to an empty string to disable animation.

Related Pages:

property showButtonPanel

Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons’ text can be customized using the currentText and closeText options respectively.

Related Pages:

property showCurrentAtPos

When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.

Related Pages:

property showMonthAfterYear

Whether to show the month after the year in the header.

Related Pages:

property showOn

When the datepicker should appear. The datepicker can appear when the field receives focus (“focus”), when a button is clicked (“button”), or when either event occurs (“both”).

Related Pages:

property showOptions

If using one of the jQuery UI effects for the showAnim option, you can provide additional properties for that animation using this option.

Related Pages:

property showOtherMonths

Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.

Related Pages:

property showWeek

When true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.

Related Pages:

property stepMonths

Set how many months to move when clicking the previous/next links.

Related Pages:

property weekHeader

The text to display for the week of the year column heading. Use the showWeek option to display this column.

Related Pages:

property yearRange

+nn”), relative to the currently selected year (“c-nn:c+nn”), absolute (“nnnn:nnnn”), or combinations of these formats (“nnnn:-nn”). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.

Related Pages:

Type:

The range of years displayed in the year drop-down

Type:

either relative to today’s year (“-nn

property yearSuffix

Additional text to display after the year in the month headers.

Related Pages:

class epyk.core.html.options.OptInputs.OptionsInput(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property autocomplete

The input autocomplete attribute specifies whether a form or an input field should have autocomplete on or off.

Related Pages:

property autofocus

The input autofocus attribute specifies that an input field should automatically get focus when the page loads.

Related Pages:

property background

Specifies the maximum number of characters allowed in the text area

Related Pages:

property borders
css(attrs: dict)
Parameters:

attrs – Dictionary. CSS attributes

property disabled

The rows attribute specifies the visible height of a text area, in lines.

Related Pages:

property maxlength

Specifies the maximum number of characters allowed in the text area

Related Pages:

property name

Specifies a name for a text area

Related Pages:

property pattern

The input pattern attribute specifies a regular expression that the input field’s value is checked against, when the form is submitted.

Related Pages:

property placeholder

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

Related Pages:

property readonly

The readonly attribute is a boolean attribute.

Related Pages:

property required

Specifies that a text area is required/must be filled out

Related Pages:

property reset
property select
property spellcheck

The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.

Related Pages:

property step

The input step attribute specifies the legal number intervals for an input field.

Related Pages:

property wrap

Specifies how the text in a text area is to be wrapped when submitted in a form.

Related Pages:

class epyk.core.html.options.OptInputs.OptionsInputInteger(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property quantity
class epyk.core.html.options.OptInputs.OptionsInputRange(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property output
class epyk.core.html.options.OptInputs.OptionsTextarea(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property rows

The rows attribute specifies the visible height of a text area, in lines.

Related Pages:

class epyk.core.html.options.OptInputs.OptionsTimePicker(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property appendTo

Override where the dropdown is appended.

Takes either a string to use as a selector, a function that gets passed the clicked input element as argument or a jquery object to use directly.

Related Pages:

property className

A class name to apply to the HTML element that contains the timepicker dropdown.

Related Pages:

property closeOnWindowScroll

Close the timepicker when the window is scrolled. (Replicates <select> behavior.)

Related Pages:

property disableTextInput

Disable typing in the timepicker input box; force users to select from list.

Related Pages:

disableTimeRanges(values)

Disable selection of certain time ranges. Input is an array of time pairs, like [[‘3:00am’, ‘4:30am’], [‘5:00pm’, ‘8:00pm’]].

The start of the interval will be disabled but the end won’t.

Related Pages:

property disableTouchKeyboard

Disable the onscreen keyboard for touch devices. There can be instances where Firefox or Chrome have touch events enabled (such as on Surface tablets but not actually be a touch device. In this case disableTouchKeyboard will prevent the timepicker input field from being focused.

Related Pages:

property durationTime

The time against which showDuration will compute relative times. Accepts a time string, Date object, integer seconds from midnight, or a function that returns one of those types.

Related Pages:

property forceRoundTime

Force update the time to step settings as soon as it loses focus.

Related Pages:

property lang

Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs.

Related Pages:

property listWidth

Set this to override CSS styling and set the list width to match the input element’s width. Set to 1 to match input width, 2 to double input width, .5 to halve input width, etc. Set to null to let CSS determine the list width.

Related Pages:

property maxTime

The time that should appear last in the dropdown list. Can be used to limit the range of time options. Accepts a time string, Date object, integer seconds from midnight, or a function that returns one of those types.

Related Pages:

property minTime

The time that should appear first in the dropdown list. Accepts a time string, Date object, integer seconds from midnight, or a function that returns one of those types.

Related Pages:

property noneOption

Adds one or more custom options to the top of the dropdown.

Related Pages:

property orientation

By default the timepicker dropdown will be aligned to the bottom right of the input element, or aligned to the top left if there isn’t enough room below the input.

Related Pages:

roundingFunction()

Function used to compute rounded times. The function will receive time in seconds and a settings object as arguments. The function should handle a null value for seconds. default: round to nearest step.

Related Pages:

property scrollDefault

00”. Accepts a time string, Date object, integer seconds from midnight, or a function that returns one of those types.

Related Pages:

Type:

If no time value is selected, set the dropdown scroll position to show the time provided, e.g. “09

property selectOnBlur

Update the input with the currently highlighted time value when the timepicker loses focus.

Related Pages:

property show2400

00” as an option when using 24-hour time format. You must also set timeFormat for this option to work.

Related Pages:

Type:

Show “24

property showDuration

Shows the relative time for each item in the dropdown. minTime or durationTime must be set.

Related Pages:

property showOn

Display a timepicker dropdown when the input fires a particular event. Set to null or an empty array to disable automatic display. Setting should be an array of strings. default: [‘focus’].

Related Pages:

property step

The amount of time, in minutes, between each item in the dropdown. Alternately, you can specify a function to generate steps dynamically. The function will receive a count integer (0, 1, 2…) and is expected to return a step integer.

Related Pages:

property stopScrollPropagation

When scrolling on the edge of the picker, it prevent parent containers () to scroll.

Related Pages:

property timeFormat

How times should be displayed in the list and input element. Uses PHP’s date() formatting syntax. Characters can be escaped with a preceeding double slash (e.g. Hhi).

Related Pages:

property typeaheadHighlight

Highlight the nearest corresponding time option as a value is typed into the form input.

Related Pages:

property useSelect

Convert the input to an HTML <SELECT> control. This is ideal for small screen devices, or if you want to prevent the user from entering arbitrary values.

Related Pages:

property wrapHours

30, for example) is entered, apply modolo 24 to create a valid time. Setting this to false will cause an input of 27:30 to result in a timeFormatError event.

Related Pages:

Type:

If a time greater than 24 hours (27