Javascript Interface

The Page object will allow you to write plain JavaScript from the js property. It will then make available most of the common features defined in the JavaScript world.

No need to move to JavaScript, to edit some extra configuration files or even to write wrappers in Strings, this interface will provide you auto completion and links to the underlying web site to learn more about those concepts.

Each component will have a JavaScript entry point which will either redirect to this or will define a specific one in line with the external package definition. More details one the component design a link.

Shortcut and Features

This will provide common features like:

  • math

  • navigator

  • performance

  • web socket

  • primitives

Technical Documentation

The below secion will provide the technical documentation of the base class for JavaScript.

class epyk.core.js.Js.JsBase(page: Optional[PageModel] = None, component: Optional[HtmlModel] = None)
property accounting

Shortcut to accounting properties.

Usages:

page.js.accounting.add_to_imports()

Related Pages:

activeElement()

The activeElement property returns the currently focused element in the document.

Related Pages:

Returns:

A reference to the element object in the document that has focus.

and_(*args) → jsWrap

Create a Javascript and statement.

property body: JsDoms

Get the DOM object.

This will return the object. It will not create any variable.

property breadcrumb: JsBreadCrumb

Create an internal Breadcrumb to keep track of the user journey within your page.

Related Pages:

Returns:

A Python breadcrumb object.

clipboard(data: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None)

Copy the full URL to rhe clipboard.

Related Pages:

Parameters:

  • data – The Javascript expression

  • js_conv_func – Optional. A specific JavaScript data conversion function

createAttribute(attribute_name)

The createAttribute() method creates an attribute with the specified name, and returns the attribute as an Attr object.

Related Pages:

Parameters:

attribute_name – The name of the attribute you want to create.

Returns:

A Node object, representing the created attribute.

createElement(tag_name: str, js_code: Optional[str] = None, set_var: bool = True, dom_id: Optional[str] = None)

The createElement() method creates an Element Node with the specified name.

Related Pages:

Parameters:

  • tag_name – The name of the element you want to create

  • js_code – The variable name to be set. Default random name

  • set_var – Optional. Create a variable for the new object. Default True

  • dom_id – Optional. The Dom ID reference for the object

createEvent(event_type: str)

The createEvent() method creates an event object.

The event can be of any legal event type, and must be initialized before use.

Related Pages:

Parameters:

event_type – A String that specifies the type of the event.

Returns:

An Event object

static createTextNode(text: Optional[Union[JsDataModel, str]] = None, js_conv_func: Optional[Union[list, str]] = None) → JsObject

The createTextNode() method creates a Text Node with the specified text.

Related Pages:

Parameters:

  • text – Optional. The text of the Text node

  • js_conv_func – Optional. A specific JavaScript data conversion function

Returns:

A Text Node object with the created Text Node.

custom(data: Union[str, JsDataModel], key: Optional[str] = None, is_py_data: bool = False, js_func: Optional[Union[list, str]] = None)

Allow the definition of bespoke javascript strings.

Parameters:

  • data – A String corresponding to a JavaScript object

  • key – Optional. A key reference in the JavaScript object

  • is_py_data – Optional. Specify if the data is in Python and should be jsonify first

  • js_func – Optional. Javascript functions

customFile(filename: str, path: Optional[str] = None, module_type: str = 'text/javascript', absolute_path: bool = False, requirements: Optional[list] = None, randomize: bool = False, authorize: bool = False)

This will load your local javascript file when the report will be built. Then you will be able to use the new features in the different Javascript wrappers.

Usage:

page.js.customFile("test.js", r"C:

older”)

param filename:

The filename

param path:

Optional. The file path

param module_type:

Optional. The module type

param absolute_path:

Optional. If path is None this flag will map to the current main path

param requirements:

Optional. The list of required packages

param randomize:

Optional. Add random suffix to the module to avoid browser caching

param authorize:

Optional. Add to the restricted list of packages

return:

The Js Object to allow the chaining.

customText(text: str)

Javascript fragment added at the beginning of the page. This will be called before any function in the framework.

Parameters:

text – The Javascript fragment

Returns:

self to allow the chaining.

property d3

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Related Pages:

property data: JsData

Get wrapped JavaScript data structures.

decodeURIComponent(url_enc: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None) → JsObject

The decodeURIComponent() function decodes a URI component.

Related Pages:

Parameters:

  • url_enc – The URI to be decoded

  • js_conv_func – Optional. A specific JavaScript data conversion function

Returns:

A String, representing the decoded URI.

delay(js_funcs: Union[list, str], seconds: int = 0, window_id: str = 'window', profile: Optional[Union[bool, dict]] = False)

Add a wrapper on top of the setTimeout.

Usage:

page.js.delay([text.build("Change the value")], 5)
Parameters:

  • js_funcs – The function that will be executed

  • seconds – Optional. The number of seconds to wait before executing the code

  • window_id – Optional. The JavaScript window object

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

delete(url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[List[Union[Tuple[HtmlModel, str], HtmlModel]]] = None, profile: Optional[Union[bool, dict]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a DELETE HTTP request.

Related Pages:

Parameters:

  • url – The url path of the HTTP request

  • data – Optional. Corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

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

  • headers – Optional. The request headers

  • asynchronous – Async flag: true (asynchronous) or false (synchronous)

  • stringify – Optional. Stringify the request data for json exchange

  • dataflows – Chain of data transformations

property documentElement

Document.documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents).

Related Pages:

encodeURIComponent(uri: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None) → JsObject

The encodeURIComponent() function encodes a URI component.

Related Pages:

Parameters:

  • uri – The URI to be encoded

  • js_conv_func – Optional. A specific JavaScript data conversion function

Returns:

A String, representing the encoded URI.

eval(data: Union[JsDataModel, str], js_conv_func: Optional[Union[list, str]] = None)

The eval() function evaluates JavaScript code represented as a string.

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). See Never use eval()!, below.

Related Pages:

Parameters:

  • data – Data to be evaluated

  • js_conv_func – Optional. A specific JavaScript data conversion function

execCommand(command: str, show_ui: bool, value: str) → JsVoid

The execCommand() method executes the specified command for the selected part of an editable section.

Related Pages:

:param command:. Specifies the name of the command to execute on the selected section :param show_ui: specifies if the UI should be shown or not :param value: Some commands need a value to be completed

Returns:

A Boolean, false if the command is not supported, otherwise true.

extendProto(py_class: Any, func_name: str, js_funcs: Union[str, list], pmts: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False)

Javascript Framework extension.

Hook in the base class to allow the definition of specific function to add extra primitive features. Usual this function should be used in a wrapper function with the same name in order to have a coherent bridge between Python and Javascript.

Related Pages:

Parameters:

  • py_class – PyJs class name

  • func_name – The Javascript function name

  • js_funcs – Javascript functions

  • pmts – Optional. Specific Python options available for this component

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

Returns:

The Js Object to allow the chaining.

fetch(url: str, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False, async_await: bool = False) → JsPromise

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.

Usage:

page.ui.button("Click").click([
  page.js.fetch("test", {"method": "POST"}).then([
    page.js.console.log(pk.events.response)
  ])
])

Related Pages:

Parameters:

  • url – The target url

  • options – Optional. Specific Python options available for this component

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

  • async_await – Optional.

property fncs: JsRegisteredFunctions

Property to the predefined Javascript functions.

Returns:

The predefined functions.

for_(js_funcs: Optional[Union[list, str]] = None, step: int = 1, start: int = 0, end: int = 10, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False) → JsFor

Shortcut to a for loop.

Usage:

js_for = page.js.for_(end=30)
js_for.fncs([page.js.console.log(js_for.i)])

Related Pages:

Parameters:

  • js_funcs – Javascript functions

  • step – Optional. The value to increment. Default 1

  • start – Optional. The first index in the for loop

  • end – Optional. The last index in the for loop

  • options – Optional. Specific Python options available for this component

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

get(url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[Union[Tuple[HtmlModel, str], List[HtmlModel]]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a GET HTTP request.

Usage:

inputs = page.ui.input("")
btn = page.ui.button("Click").click([
  page.js.get("/test", {"fegeg": "efefe", "ok": inputs.dom.content}, components=[("input", inputs)])
])
Parameters:

  • url – The url path of the HTTP request

  • data – Optional. A String corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

  • headers – Optional. The request headers

  • asynchronous – Async flag: true (asynchronous) or false (synchronous)

  • dataflows – Chain of data transformations

static getElementById(id_name: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None)

The getElementById() method returns the element that has the ID attribute with the specified value.

Related Pages:

Parameters:

  • id_name – The ID attribute’s value of the element you want to get.

  • js_conv_func – Optional. A specific JavaScript data conversion function.

Returns:

An Element Object, representing an element with the specified ID. Returns null if no elements with

the specified ID exists

static getElementsByClassName(cls_name: str) → JsDoms

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object.

Related Pages:

Parameters:

cls_name – The class name of the elements you want to get.

Returns:

A NodeList object, representing a collection of elements with the specified class name. The elements in the returned collection are sorted as they appear in the source code.

static getElementsByName(name: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None) → JsDomsList

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Related Pages:

Parameters:

  • name – The name attribute value of the element you want to access/manipulate.

  • js_conv_func – Optional. A specific JavaScript data conversion function.

Returns:

A NodeList object, representing a collection of elements with the specified name. The elements in the returned collection are sorted as they appear in the source code.

static getElementsByTagName(tag_name: Union[str, JsDataModel], i: int = 0, js_conv_func: Optional[Union[list, str]] = None) → JsDoms

The getElementsByTagName() method returns a collection of an elements’s child elements with the specified tag name, as a NodeList object.

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

Related Pages:

Parameters:

  • tag_name – The tag name of the child elements you want to get

  • i – Optional. The index of the element

  • js_conv_func – Optional. A specific JavaScript data conversion function

getVar(js_code: Union[str, JsDataModel], var_type: str = 'var') → JsObject

Get the Javascript Variable name.

Parameters:

  • js_code – The Variable name

  • var_type – Optional. The scope of the variable

Returns:

Return the piece of script to be added to the Javascript.

if_(condition: Union[str, list, bool], js_funcs: Union[list, str], profile: Optional[Union[bool, dict]] = False)

Conditional statements are used to perform different actions based on different conditions.

Usage:

page.js.if_(icon.icon.dom.content == "fas fa-lock-open cssicon", [
  page.js.console.log(icon.icon.dom.content),
])

Related Pages:

Parameters:

  • condition – The Javascript condition. Can be a JsBoolean object

  • js_funcs – Optional. The Javascript functions

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

import_css(css_file: str, self_contained: bool = False, js_code: str = 'css_dyn')

Add a CSS file on the fly from a JavaScript event.

Related Pages:

Parameters:

  • css_file – A script name with a CSS extension

  • self_contained – Optional. A flag to specify where the import will be done

import_js(script: str, js_funcs: Union[str, list], profile: Optional[Union[bool, dict]] = None, self_contained: bool = False)

Add a Javascript module and then run function once it is loaded.

Usage:

icon = page.ui.icons.clock().css({"color": 'blue'})
icon.click([ page.js.import_js("utils.js", ["testImport()"])])

Related Pages:

Parameters:

  • script – A script name. A Js extension

  • js_funcs – Callback function when module loaded. The Javascript functions

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

  • self_contained – Optional. A flag to specify where the import will be done

info(data: Union[str, JsDataModel], css_style: Optional[dict] = None, icon: str = 'fas fa-spinner fa-spin', seconds: int = 10000)

Display a message.

Related Pages:

Parameters:

  • data – A String corresponding to a JavaScript object

  • css_style – Optional. The CSS attributes to be added to the HTML component

  • icon – Optional. A string with the value of the icon to display from font-awesome

  • seconds – Optional. The number of second the info will be visible

intersectionObserver(js_code: str, callback: Optional[Union[List[Union[str, JsDataModel]], str]] = None, options: Optional[dict] = None, observe_once: bool = False, profile: Optional[Union[bool, dict]] = None) → IntersectionObserver
Parameters:

  • js_code – The PyJs functions.

  • callback – JavaScript functions called by the intersectionObserver.

  • options – intersectionObserver options.

  • observe_once – A flag to remove the observable once callbacks run.

  • profile – Option to perform profiling logs in the browser console.

property jquery

jQuery is a fast, small, and feature-rich JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Usage:

btn = page.ui.button("Click")
btn.js.jquery.on("click", [
  page.js.alert("It works"),
  btn.js.jquery.after('<div style="background-color:yellow"> New div </div>'),
])

Related Pages:

property keydown: KeyCode

The onkeydown event occurs when the user is pressing a key (on the keyboard).

Usage:

page.js.keydown.enter(pk.js_std.alert('Hello World'), profile=True)

Related Pages:

property keypress: KeyCode

The onkeypress event occurs when the user presses a key (on the keyboard).

Usage:

page.js.keypress.enter(pk.js_std.alert('Hello World'), profile=True)

Related Pages:

property keyup: KeyCode

The onkeypress event occurs when the user presses a key (on the keyboard).

Usage:

page.js.keyup.enter(pk.js_std.alert('Hello World'), profile=True)

Related Pages:

property location: JsLocation

Property to the Javascript Location functions.

Usage:

page.ui.text("Test").click([
  page.js.location.open_new_tab(page.js.location.getUrlFromArrays([
    ["AAA", "BBB"], ["111", "222"]], end_line="

“))])

mail(mails, subject=None, body=None, cc=None, bcc=None)

Create an email.

Related Pages:

Parameters:

  • mails –

  • subject –

  • body –

  • bcc –

property mediaRecorder: MediaRecorder

The MediaRecorder interface of the MediaStream Recording API provides functionality to easily record media. It is created using the MediaRecorder() constructor.

Related Pages:

property moment

Parse, validate, manipulate, and display dates and times in JavaScript.

Usage:

page.js.moment.new("2021-08-05", varName="momentTime"),
page.js.console.log(page.js.moment.var("momentTime").weekYear(1998)),
page.js.console.log(page.js.moment.var("momentTime").weekYear()),
page.js.console.log(page.js.moment.new("2021-08-05")),

Related Pages:

property msg: Msg

Shortcut to predefined temporary messages displayed to the UI.

navigateTo(url: Union[str, JsDataModel], options: Optional[dict] = None) → JsObject

Navigator to another URL like NodeJs.

Usage:

icon.click([self.context.page.js.navigateTo(url)])

Related Pages:

Parameters:

  • url – The target url

  • options – Optional. The property of the location object

property navigator: JsNavigator

The information from the navigator object can often be misleading, and should not be used to detect browser versions because:

  • Different browsers can use the same name.

  • The navigator data can be changed by the browser owner.

  • Some browsers misidentify themselves to bypass site tests.

  • Browsers cannot report new operating systems, released later than the browser.

not_(data, js_conv_func: Optional[Union[list, str]] = None) → JsFunction

Add the Symbol (!) for the boolean negation. This feature is also available directly to any JsBoolean objects.

Usage:

jsObj.not_(jsObj.objects.boolean.get("weekend"))

Related Pages:

Parameters:

  • data – A String corresponding to a JavaScript object

  • js_conv_func – Optional. A specific JavaScript data conversion function

Returns:

The Javascript fragment string.

number(data, js_code: Optional[str] = None, set_var: bool = False, is_py_data: bool = True) → JsNumber

Shortcut to the Javascript Number primitives.

Parameters:

  • data – The String data.

  • js_code – Optional. The specific name to be used for this JavaScript String.

  • set_var – Optional. Set a variable. Default False.

  • is_py_data – Optional. Specify the type of data.

object(data, js_code: Optional[str] = None, set_var: bool = False, is_py_data: bool = True) → JsObject

Shortcut to the Javascript Object primitives.

Parameters:

  • data – The String data.

  • js_code – Optional. The specific name to be used for this JavaScript String.

  • set_var – Optional. Set a variable. Default False.

  • is_py_data – Optional. Specify the type of data.

property objects: JsObjects

Interface to the main Javascript Classes and Primitives.

onReady(js_funcs: Union[str, list], profile: Optional[Union[bool, dict]] = False)

The ready event occurs when the body DOM (document object model) has been loaded.

Related Pages:

Parameters:

  • js_funcs – The Javascript functions to be added to this section

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

or_(*args) → jsWrap

Create a Javascript Or statement.

static parseDate(value: str) → JsNumber

The parse() method parses a date string and returns the number of milliseconds between the date string and midnight of January 1, 1970.

Related Pages:

Parameters:

value – A string representing a date.

Returns:

Number. Representing the milliseconds between the specified date-time and midnight January 1, 1970.

static parseFloat(value: str) → JsNumber

The parseFloat() function parses a string and returns a floating point number.

Related Pages:

Parameters:

value – The string to be parsed.

Returns:

A Number. If the first character cannot be converted to a number, NaN is returned.

static parseInt(value: str)

The parseInt() function parses a string and returns an integer.

Related Pages:

Parameters:

value – The string to be parsed.

Returns:

A Number. If the first character cannot be converted to a number, NaN is returned.

patch(url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[List[Union[Tuple[HtmlModel, str], HtmlModel]]] = None, profile: Optional[Union[bool, dict]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a PATH HTTP request.

Related Pages:

Parameters:

  • url – The url path of the HTTP request

  • data – Optional. Corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

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

  • headers – Optional. The request headers

  • asynchronous – Async flag: true (asynchronous) or false (synchronous)

  • stringify – Optional. Stringify the request data for json exchange

  • dataflows – Chain of data transformations

post(url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[List[Union[Tuple[HtmlModel, str], HtmlModel]]] = None, profile: Optional[Union[bool, dict]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a POST HTTP request.

Related Pages:

Parameters:

  • url – The url path of the HTTP request

  • data – Optional. Corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

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

  • headers – Optional. The request headers

  • asynchronous – Async flag: true (asynchronous) or false (synchronous)

  • stringify – Optional. Stringify the request data for json exchange

  • dataflows – Chain of data transformations

print(content: Union[str, JsDataModel], timer: int = 1000, css_attrs: Optional[dict] = None)

Print a temporary message.

Parameters:

  • content – The content of the popup.

  • timer – Optional. The time the popup will be displayed.

  • css_attrs – Optional. The CSS attributes for the popup.

profile(type: Union[str, JsDataModel], html_code: str, mark: Union[str, JsDataModel], records_count: Optional[int] = None)
Parameters:

  • type – The type of profile tag.

  • html_code – The HTML component ID.

  • mark – The mark reference.

  • records_count – Optional. The records count.

put(url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[List[Union[Tuple[HtmlModel, str], HtmlModel]]] = None, profile: Optional[Union[bool, dict]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a PUT HTTP request.

Related Pages:

Parameters:

  • url – The url path of the HTTP request

  • data – Optional. Corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

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

  • headers – Optional. The request headers

  • asynchronous – Async flag: true (asynchronous) or false (synchronous)

  • stringify – Optional. Stringify the request data for json exchange

  • dataflows – Chain of data transformations

querySelector(selector: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None)

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Related Pages:

Parameters:

  • selector – CSS selectors.

  • js_conv_func – Optional. A specific JavaScript data conversion function.

querySelectorAll(selector: Union[str, JsDataModel], js_conv_func: Optional[Union[list, str]] = None) → JsDomsList

The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.

Related Pages:

Parameters:

  • selector – CSS selectors.

  • js_conv_func – Optional. A specific JavaScript data conversion function.

queueMicrotask(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser’s event loop.

Usage:

page.body.onReady([
    page.js.queueMicrotask([page.js.alert("ok")])
  ])

Related Pages:

Parameters:

  • js_funcs – The Javascript function definition

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

registerFunction(func_name: str, js_funcs: Union[str, list], args: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False)

Javascript Framework extension.

Register a predefined Javascript function. This is only dedicated to specific Javascript transformation functions.

Parameters:

  • func_name – The function name

  • js_funcs – The Javascript function definition

  • args – Optional. Specific Python options available for this component

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

request_http(method_type: str, url: str, js_code: str = 'response', is_json: bool = True, components: Optional[List[HtmlModel]] = None) → XMLHttpRequest

All modern browsers have a built-in XMLHttpRequest object to request data from a server.

Related Pages:

Usage:

page.js.request_http("ajax", "POST", "https://api.cdnjs.com/libraries").setHeaders(header).onSuccess([
page.js.alert(rptObj.js.objects.request.get("ajax").responseText)]).send(encodeURIData={"search": 'ractive'})
Parameters:

  • method_type – The method of the HTTP Request

  • url – The url path of the HTTP request

  • js_code – Optional. The variable name created in the Javascript

  • is_json – Optional. Specify the type of object passed

  • components – Optional. A list of HTML objects values to be passed in the request

request_rpc(js_code: str, method_type: Union[str, JsDataModel], fnc: Callable, url: str, extra_params: Optional[Union[dict, JsDataModel]] = None) → XMLHttpRequest

Internal RPC to trigger services.

Parameters:

  • js_code – The variable name created in the Javascript.

  • method_type – The method type

  • fnc – Python function.

  • url – The service url

  • extra_params – Optional.

rest(method: str, url: Union[str, JsDataModel], data: Optional[dict] = None, js_code: str = 'response', is_json: bool = True, components: Optional[List[Union[Tuple[HtmlModel, str], HtmlModel]]] = None, profile: Optional[Union[bool, dict]] = None, headers: Optional[dict] = None, asynchronous: bool = False, stringify: bool = True, dataflows: Optional[List[dict]] = None) → XMLHttpRequest

Create a POST HTTP request.

Parameters:

  • method – The REST method used

  • url – The url path of the HTTP request

  • data – Optional. Corresponding to a JavaScript object

  • js_code – Optional. The variable name created in the Javascript (default response)

  • is_json – Optional. Specify the type of object passed

  • components – Optional. This will add the component value to the request object

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

  • headers – Optional. The request headers

  • asynchronous – Optional. Async flag: true (asynchronous) or false (synchronous)

  • stringify – Optional. Stringify the request data for json exchange

  • dataflows – Chain of data transformations

return_(data: str) → JsFunction

Javascript return keyword.

Parameters:

data – The Javascript expression.

property rxjs

Reactive Extensions Library for JavaScript.

Related Pages:

property samples: Samples

JavaScript feature to provide sample of data for a test/demo.

Usage:

page.js.samples.months(count_=7)
page.js.samples.numbers(count_=7, min_=-100, max_=100)
property screen

The screen object contains information about the visitor’s screen.

Related Pages:

serverSentEvent(html_code: Optional[str] = None) → ServerSentEvent

SSE is a native HTML5 feature that allows the server to keep the HTTP connection open and push data changes to the client. Server-sent Streaming is really ideal for server-push notifications, device monitoring and all other tasks that do not require real-time push back from the client.

Related Pages:

Parameters:

html_code – The EventSource id (variable name) on the JavaScript side

socketio(html_code: Optional[str] = None)

This object must be created on the Python side.

The various function will be the one generating the Javascript string. This is just a Python wrapper on top of the library.

Related Pages:

Parameters:

html_code – Optional. The WebSocket id (variable name) on the JavaScript side

speechRecognition(js_code: str) → SpeechRecognition

The SpeechRecognition interface of the Web Speech API is the controller interface for the recognition service; this also handles the SpeechRecognitionEvent sent from the recognition service.

Related Pages:

Usage:

page = pk.Page()
rec = page.js.speechRecognition("reco")

test = page.ui.button("Start recording")
test.click([rec.start()])

page.ui.input(html_code="test")

rec.speechend([rec.stop()])
rec.onresult([pk.js_callback("UpdateComponent(transcript, confidence)"), page.js.console.log("Done")])
page.body.onReady([page.js.import_js("test_fnc.js", [], self_contained=True), rec])

# in the module test_fnc.js
function ProcessData(transcript, confidence){
    console.log(transcript); return (transcript == 'hello')}

function UpdateComponent(transcript, confidence){
    var expr = transcript.split(" ");
    if (expr[0] === "put"){document.getElementById(expr[3]).value = expr[1]}}
Parameters:

js_code – The variable name for the speech recognition object

string(data, js_code: Optional[str] = None, set_var: bool = False, is_py_data: bool = True) → JsString

Shortcut to the Javascript String primitives.

Parameters:

  • data – The String data.

  • js_code – Optional. The specific name to be used for this JavaScript String.

  • set_var – Optional. Set a variable. Default False.

  • is_py_data – Optional. Specify the type of data.

switch(variable: Union[str, JsDataModel, HtmlModel], js_conv_func: Optional[Union[list, str]] = None) → JsSwitch

switch statement is used to perform different actions based on different conditions.

Related Pages:

Parameters:

  • variable – Variable on which we will apply the switch

  • js_conv_func – Optional. A specific JavaScript data conversion function

static title(text: Optional[Union[JsDataModel, str]] = None, js_conv_func: Optional[Union[list, str]] = None)

The title property sets or returns the title of the current document (the text inside the HTML title element).

Related Pages:

Parameters:

  • text – Optional. Representing the title of the document

  • js_conv_func – Optional. A specific JavaScript data conversion function

static typeof(data: str, var_type: Optional[str] = None)

The typeof function.

Related Pages:

Parameters:

  • data – A String corresponding to a JavaScript object

  • var_type – Optional. The type of object

property viewHeight

Return the current View port height visible in the browser.

websocket(html_code: Optional[str] = None, secured: bool = False)

WebSocket client applications use the WebSocket API to communicate with WebSocket servers using the WebSocket protocol.

Related Pages:

Parameters:

  • html_code – Optional. The WebSocket id (variable name) on the JavaScript side

  • secured – Optional. To define the right protocol for the WebSocket connection we or wss

while_(condition: Union[str, list], js_funcs: Union[list, str], options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False) → JsWhile

The while loop loops through a block of code as long as a specified condition is true.

Related Pages:

Parameters:

  • condition – The JavaScript condition

  • js_funcs – Javascript functions

  • options – Optional. Specific Python options available for this component

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

worker(html_code: Optional[str] = None, server: bool = False)

A web worker is a JavaScript running in the background, without affecting the performance of the page.

Related Pages:

Parameters:

  • html_code – Optional. The WebSocket id (variable name) on the JavaScript side

  • server – Optional. Specify if the page is running on a server

writeln(value: str)

The writeln() method is identical to the document.write() method, with the addition of writing a newline character after each statement.

Related Pages:

Parameters:

value – What to write to the output stream. Multiple arguments can be listed and they will be appended to the document in order of occurrence

Returns:

No return value