Commit 45085a80 authored by Martin Alvarez-Espinar's avatar Martin Alvarez-Espinar
Browse files

Distribution generated

parent a7fc07f5
Pipeline #18393 failed with stage
in 1 minute and 35 seconds
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>video | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/40.f3b3b2c9.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Basic Elements</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Media</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/animation.html" class="sidebar-link">animations</a></li><li><a href="/developers/components/camera.html" class="sidebar-link">camera</a></li><li><a href="/developers/components/canvas.html" class="sidebar-link">canvas</a></li><li><a href="/developers/components/marquee.html" class="sidebar-link">marquee</a></li><li><a href="/developers/components/transform.html" class="sidebar-link">transform property</a></li><li><a href="/developers/components/video.html" aria-current="page" class="active sidebar-link">video</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/video.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/video.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/video.html#css-properties" class="sidebar-link">CSS Properties</a></li><li class="sidebar-sub-header"><a href="/developers/components/video.html#events" class="sidebar-link">Events</a></li><li class="sidebar-sub-header"><a href="/developers/components/video.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/video.html#example" class="sidebar-link">Example</a></li></ul></li></ul></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="video"><a href="#video" class="header-anchor">#</a> <code>video</code></h1> <p>Video player.</p> <img src="/developers/assets/img/video01.e2408818.gif" alt="Video options on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <div class="custom-block tip"><p class="custom-block-title">Supported Formats</p> <p>Quick apps supports the HTTP, HTTPS, and RTSP protocols, and audio and video encodings such as H.263, H.264, MPEG-4, AAC, FLAC, MP3. The platform supports the following file formats: MPEG-4 (.mp4), 3GPP (.3gp), MPEG-TS (.ts), Matroska (.mkv), and Ogg (.ogg).</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#muted">muted</a></li><li><a href="#src">src</a></li><li><a href="#autoplay">autoplay</a></li><li><a href="#poster">poster</a></li><li><a href="#controls">controls</a></li><li><a href="#orientation">orientation</a></li><li><a href="#titlebar">titlebar</a></li><li><a href="#title">title</a></li></ul></li><li><a href="#css-properties">CSS Properties</a><ul><li><a href="#object-fit">object-fit</a></li></ul></li><li><a href="#events">Events</a><ul><li><a href="#prepared">prepared</a></li><li><a href="#start">start</a></li><li><a href="#pause">pause</a></li><li><a href="#finish">finish</a></li><li><a href="#error">error</a></li><li><a href="#seeking">seeking</a></li><li><a href="#seeked">seeked</a></li><li><a href="#timeupdate">timeupdate</a></li><li><a href="#fullscreenchange">fullscreenchange</a></li></ul></li><li><a href="#methods">Methods</a><ul><li><a href="#start">start()</a></li><li><a href="#pause">pause()</a></li><li><a href="#setcurrenttime-currenttime">setCurrentTime({currenttime})</a></li><li><a href="#requestfullscreen-screenorientation">requestFullscreen({screenOrientation})</a></li><li><a href="#exitfullscreen">exitFullscreen()</a></li></ul></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element doesn't support children elements.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>In addition to the <a href="./attributes">common attributes</a>, this element may contain the following attributes.</p> <ul><li><a href="#muted"><code>muted</code></a></li> <li><a href="#src"><code>src</code></a></li> <li><a href="#autoplay"><code>autoplay</code></a></li> <li><a href="#poster"><code>poster</code></a></li> <li><a href="#controls"><code>controls</code></a></li> <li><a href="#orientation"><code>orientation</code></a></li> <li><a href="#titlebar"><code>titlebar</code></a></li> <li><a href="#title"><code>title</code></a></li></ul> <h3 id="muted"><a href="#muted" class="header-anchor">#</a> <code>muted</code></h3> <p>Attribute that indicates whether a video is played in mute mode (<code>true</code>) or not (<code>false</code>).</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="src"><a href="#src" class="header-anchor">#</a> <code>src</code></h3> <p>Source of the video document. The value can be <a href="/developers/guide/directory.html#references-and-uris">an absolute or a relative URI</a>.</p> <ul><li>Type: <code>uri</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="autoplay"><a href="#autoplay" class="header-anchor">#</a> <code>autoplay</code></h3> <p>Flag to indicate if a video runs automatically once rendered.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="poster"><a href="#poster" class="header-anchor">#</a> <code>poster</code></h3> <p>Source of a preview image for the video.</p> <ul><li>Type: <code>uri</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="controls"><a href="#controls" class="header-anchor">#</a> <code>controls</code></h3> <p>Flag to indicate if the system shows the video control bar. If the value is<code>false</code>, the controls are hidden.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>true</code></li> <li>Mandatory: no</li></ul> <h3 id="orientation"><a href="#orientation" class="header-anchor">#</a> <code>orientation</code></h3> <p>This attribute indicates the page orientation used when the video is displayed in full-screen mode.</p> <ul><li>Type: <code>string</code> (<code>portrait</code> | <code>landscape</code>)</li> <li>Default value: <code>landscape</code></li> <li>Mandatory: no</li></ul> <h3 id="titlebar"><a href="#titlebar" class="header-anchor">#</a> <code>titlebar</code></h3> <p>Flag that indicates if the system displays the title bar when a video is played in full-screen mode. The value <code>true</code> shows the title bar.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>true</code></li> <li>Mandatory: no</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>When the <a href="#controls"><code>controls</code></a> attribute is <code>false</code>, this parameter does not take effect.</p></div> <h3 id="title"><a href="#title" class="header-anchor">#</a> <code>title</code></h3> <p>The value of this attribute indicates the title to be displayed in the title bar during full-screen playback.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Only one line of text is displayed. If the text length exceeds the limit, the text is automatically truncated (<code>...</code>).</p></div> <h2 id="css-properties"><a href="#css-properties" class="header-anchor">#</a> CSS Properties</h2> <p>In addition to the <a href="./styles">common styles</a>, this element supports the following styling properties:</p> <ul><li><a href="#object-fit"><code>object-fit</code></a></li></ul> <h3 id="object-fit"><a href="#object-fit" class="header-anchor">#</a> <code>object-fit</code></h3> <p>Indicates how a video and its <a href="#poster">preview image</a> are resized and adjusted to the container.</p> <ul><li>Type: <code>string</code> (<code>contain</code> | <code>cover</code> | <code>fill</code> | <code>none</code> | <code>scale-down</code>)</li> <li>Default value: <code>contain</code></li> <li>Mandatory: no</li></ul> <p>The values for this property are:</p> <ul><li><code>cover</code>: Resize an image while keeping its aspect ratio. As a result, the image's dimensions could exceed the view's dimensions, and the image will be centered.</li> <li><code>contain</code>: Resize an image while keeping its aspect ratio within the view's dimensions and centering it.</li> <li><code>fill</code>: Resize an image without keeping its aspect ratio to fill the view.</li> <li><code>none</code>: Resize an image while keeping its original aspect ratio.</li> <li><code>scale-down</code>: The effect of this style is similar to applying <code>none</code> and <code>contain</code> in sequence. The result will be a smaller image.</li></ul> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>In addition to the <a href="./events">common events</a> (with the exception of <a href="/developers/components/events.html#swipe">swipe</a>), this element supports the following events:</p> <ul><li><a href="#prepared"><code>prepared</code></a></li> <li><a href="#start"><code>start</code></a></li> <li><a href="#pause"><code>pause</code></a></li> <li><a href="#finish"><code>finish</code></a></li> <li><a href="#error"><code>error</code></a></li> <li><a href="#seeking"><code>seeking</code></a></li> <li><a href="#seeked"><code>seeked</code></a></li> <li><a href="#timeupdate"><code>timeupdate</code></a></li> <li><a href="#fullscreenchange"><code>fullscreenchange</code></a></li></ul> <h3 id="prepared"><a href="#prepared" class="header-anchor">#</a> <code>prepared</code></h3> <p>This event is triggered when a video is successfully loaded.</p> <h3 id="start"><a href="#start" class="header-anchor">#</a> <code>start</code></h3> <p>This event is triggered when a video starts o re-starts playing.</p> <h3 id="pause"><a href="#pause" class="header-anchor">#</a> <code>pause</code></h3> <p>This event is triggered when a video is paused.</p> <h3 id="finish"><a href="#finish" class="header-anchor">#</a> <code>finish</code></h3> <p>This event is triggered when a video ends.</p> <h3 id="error"><a href="#error" class="header-anchor">#</a> <code>error</code></h3> <p>This event is triggered when a video playback fails.</p> <h3 id="seeking"><a href="#seeking" class="header-anchor">#</a> <code>seeking</code></h3> <p>This event is triggered after a user interaction with the video progress bar.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ currenttime: number }</code>. The current position of the video (in seconds).</li></ul> <h3 id="seeked"><a href="#seeked" class="header-anchor">#</a> <code>seeked</code></h3> <p>This event is triggered when the user ends the interaction with the video progress bar.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ currenttime: number }</code>. The current position of the video (in seconds).</li></ul> <h3 id="timeupdate"><a href="#timeupdate" class="header-anchor">#</a> <code>timeupdate</code></h3> <p>This event is triggered when the playing progress changes. This event is triggered every 250 ms.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ currenttime: number }</code>. The current position of the video (in seconds).</li></ul> <h3 id="fullscreenchange"><a href="#fullscreenchange" class="header-anchor">#</a> <code>fullscreenchange</code></h3> <p>This event is triggered when a video changes the full-screen mode.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ fullscreen: boolean }</code></li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element has the following methods:</p> <ul><li><a href="#start"><code>start()</code></a></li> <li><a href="#pause"><code>pause()</code></a></li> <li><a href="#setcurrenttime-currenttime"><code>setCurrentTime({currenttime})</code></a></li> <li><a href="#requestfullscreen-screenorientation"><code>requestFullscreen({ screenOrientation })</code></a></li> <li><a href="#exitfullscreen"><code>exitFullscreen()</code></a></li></ul> <h3 id="start-2"><a href="#start-2" class="header-anchor">#</a> <code>start()</code></h3> <p>Starts playing a video.</p> <h3 id="pause-2"><a href="#pause-2" class="header-anchor">#</a> <code>pause()</code></h3> <p>Pauses a video.</p> <h3 id="setcurrenttime-currenttime"><a href="#setcurrenttime-currenttime" class="header-anchor">#</a> <code>setCurrentTime({currenttime})</code></h3> <p>Method to set the video playing position.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>object</code> with the following attributes:
<ul><li><code>currenttime: number</code>. Position in seconds.</li></ul></li></ul> <h3 id="requestfullscreen-screenorientation"><a href="#requestfullscreen-screenorientation" class="header-anchor">#</a> <code>requestFullscreen({screenOrientation})</code></h3> <p>Requests to enter the full-screen mode.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>object</code> with the following attributes:
<ul><li><p><code>screenOrientation:string</code>. Indicates the orientation of the screen (<code>landscape</code> or <code>portrait</code>) (<code>portrait</code> by default).</p> <ul><li></li></ul></li></ul></li></ul> <h3 id="exitfullscreen"><a href="#exitfullscreen" class="header-anchor">#</a> <code>exitFullscreen()</code></h3> <p>Method to exit the full-screen mode.</p> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mt-item mlr-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Video component<span class="token punctuation">&quot;</span></span> <span class="token attr-name">titlebar</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showTitleBar}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">controls</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{showControls}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{videoUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>video<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mlr-container btn-list<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">startVideo</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Play<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">stopVideo</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Pause<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">fullscreen</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Full Screen<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">switchControls</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Toggle Controls<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">switchTitleBar</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Toggle Title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>list-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">setTime</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Seek (5&quot;)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>list</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.btn-list</span><span class="token punctuation">{</span>
<span class="token property">columns</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token selector">.btn-item</span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token selector">.video</span> <span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.mt-item</span> <span class="token punctuation">{</span>
<span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token keyword">public</span><span class="token operator">:</span> <span class="token punctuation">{</span>
videoUrl<span class="token operator">:</span> <span class="token string">&quot;https://espinr.github.io/sandbox/quickapps/videos/raining-leaf.mp4&quot;</span><span class="token punctuation">,</span>
showControls<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
showTitleBar<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">onInit</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$page<span class="token punctuation">.</span><span class="token function">setTitleBar</span><span class="token punctuation">(</span><span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'video'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">startVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">stopVideo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">fullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">requestFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">exitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">exitFullscreen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">switchControls</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showControls <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>showControls<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">switchTitleBar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>showTitleBar <span class="token operator">=</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>showTitleBar<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">setTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$element</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setCurrentTime</span><span class="token punctuation">(</span><span class="token punctuation">{</span>currenttime<span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/video.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/22/2021, 5:52:14 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/transform.html" class="prev">
transform property
</a></span> <span class="next"><a href="/developers/services/">
Summary of APIs
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/40.f3b3b2c9.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>web | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/41.f5a3fb56.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link router-link-active">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>UI Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/" aria-current="page" class="sidebar-link">Elements Summary</a></li><li><a href="/developers/components/attributes.html" class="sidebar-link">Common Attributes</a></li><li><a href="/developers/components/styles.html" class="sidebar-link">Common Styles</a></li><li><a href="/developers/components/events.html" class="sidebar-link">Common Events</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Basic Elements</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/components/a.html" class="sidebar-link">a</a></li><li><a href="/developers/components/image.html" class="sidebar-link">image</a></li><li><a href="/developers/components/popup.html" class="sidebar-link">popup</a></li><li><a href="/developers/components/progress.html" class="sidebar-link">progress</a></li><li><a href="/developers/components/rating.html" class="sidebar-link">rating</a></li><li><a href="/developers/components/slot.html" class="sidebar-link">slot</a></li><li><a href="/developers/components/span.html" class="sidebar-link">span</a></li><li><a href="/developers/components/text.html" class="sidebar-link">text</a></li><li><a href="/developers/components/web.html" aria-current="page" class="active sidebar-link">web</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/components/web.html#children-elements" class="sidebar-link">Children Elements</a></li><li class="sidebar-sub-header"><a href="/developers/components/web.html#attributes" class="sidebar-link">Attributes</a></li><li class="sidebar-sub-header"><a href="/developers/components/web.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/components/web.html#example" class="sidebar-link">Example</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Containers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Forms</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Media</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="web"><a href="#web" class="header-anchor">#</a> <code>web</code></h1> <p>Container to render HTML pages.</p> <img src="/developers/assets/img/web01.119a5e91.gif" alt="Webview on a Quick App" style="height:500px;border-radius:6px;border:1px #333333 solid;"> <p>(<a href="#example">Example code</a>)</p> <p>The web element supports file download, which can be implemented using the <a href="../services/webview">Web Pages API</a>.</p> <p></p><div class="table-of-contents"><ul><li><a href="#children-elements">Children Elements</a></li><li><a href="#attributes">Attributes</a><ul><li><a href="#src">src</a></li><li><a href="#supportzoom">supportzoom</a></li><li><a href="#trustedurl">trustedurl</a></li><li><a href="#allowthirdpartycookies">allowthirdpartycookies</a></li><li><a href="#showloadingdialog">showloadingdialog</a></li><li><a href="#useragent">useragent</a></li><li><a href="#algorithmsforlayout">algorithmsforlayout</a></li><li><a href="#wideviewport">wideviewport</a></li><li><a href="#overviewmodeinload">overviewmodeinload</a></li><li><a href="#multiwindow">multiwindow</a></li><li><a href="#jumppolicy">jumppolicy</a></li><li><a href="#openinbrowserurl">openinbrowserurl</a></li><li><a href="#xrequestedwithpolicy">xrequestedwithpolicy</a></li><li><a href="#fullscreendirection">fullscreendirection</a></li><li><a href="#initialscale">initialscale</a></li><li><a href="#renamejsinterface">renamejsinterface</a></li><li><a href="#pagestart">pagestart</a></li><li><a href="#pagefinish">pagefinish</a></li><li><a href="#titlereceive">titlereceive</a></li><li><a href="#error">error</a></li><li><a href="#message">message</a></li><li><a href="#progress">progress</a></li></ul></li><li><a href="#methods">Methods</a><ul><li><a href="#reload">reload()</a></li><li><a href="#forward">forward()</a></li><li><a href="#back">back()</a></li><li><a href="#canforward-callback">canForward({callback})</a></li><li><a href="#canback-callback">canBack({callback})</a></li><li><a href="#postmessage-message">postMessage({message})</a></li></ul></li><li><a href="#example">Example</a></li></ul></div><p></p> <h2 id="children-elements"><a href="#children-elements" class="header-anchor">#</a> Children Elements</h2> <p>This element doesn't support any element as child node.</p> <h2 id="attributes"><a href="#attributes" class="header-anchor">#</a> Attributes</h2> <p>This element may contain the following attributes.</p> <ul><li><a href="#src"><code>src</code></a></li> <li><a href="#supportzoom"><code>supportzoom</code></a></li> <li><a href="#trustedurl"><code>trustedurl</code></a></li> <li><a href="#allowthirdpartycookies"><code>allowthirdpartycookies</code></a></li> <li><a href="#showloadingdialog"><code>showloadingdialog</code></a></li> <li><a href="#useragent"><code>useragent</code></a></li> <li><a href="#algorithmsforlayout"><code>algorithmsforlayout</code></a></li> <li><a href="#wideviewport"><code>wideviewport</code></a></li> <li><a href="#overviewmodeinload"><code>overviewmodeinload</code></a></li> <li><a href="#multiwindow"><code>multiwindow</code></a></li> <li><a href="#jumppolicy"><code>jumppolicy</code></a></li> <li><a href="#openinbrowserurl"><code>openinbrowserurl</code></a></li> <li><a href="#xrequestedwithpolicy"><code>xrequestedwithpolicy</code></a></li> <li><a href="#fullscreendirection"><code>fullscreendirection</code></a></li> <li><a href="#initialscale"><code>initialscale</code></a></li> <li><a href="#renamejsinterface"><code>renamejsinterface</code></a></li></ul> <h3 id="src"><a href="#src" class="header-anchor">#</a> <code>src</code></h3> <p>URL of a web resource to be loaded within the element.</p> <ul><li>Type: <code>string</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="supportzoom"><a href="#supportzoom" class="header-anchor">#</a> <code>supportzoom</code></h3> <p>Flag that indicates if the web resource can change its size (zoom in/out).</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="trustedurl"><a href="#trustedurl" class="header-anchor">#</a> <code>trustedurl</code></h3> <p>List of trusted URLs (whitelist), which can be specified as regular expressions.</p> <ul><li>Type: <code>array</code></li> <li>Default value: (the current value of <code>src</code>)</li> <li>Mandatory: no</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Only the websites specified in <code>trustedurl</code> or <code>src</code> support two-way communication.</p></div> <h3 id="allowthirdpartycookies"><a href="#allowthirdpartycookies" class="header-anchor">#</a> <code>allowthirdpartycookies</code></h3> <p>Flag that indicates if third-party cookies can be delivered across domains.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="showloadingdialog"><a href="#showloadingdialog" class="header-anchor">#</a> <code>showloadingdialog</code></h3> <p>Flag to show or hide the progress bar.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>true</code></li> <li>Mandatory: no</li></ul> <h3 id="useragent"><a href="#useragent" class="header-anchor">#</a> <code>useragent</code></h3> <p>User agent to be specified in the HTTP headers.</p> <ul><li>Type: <code>string</code></li> <li>Default value: the user agent of the quick app.</li> <li>Mandatory: no</li></ul> <div class="custom-block tip"><p class="custom-block-title">User agent of the quick app</p> <p>The user agent of the quick app follows this pattern:
<code>hap/&lt;Platform version number&gt;/&lt;Vendor ID&gt; &lt;Platform app package name&gt;/&lt;Platform app version number&gt; &lt;App package name&gt;/&lt;App version number&gt; (&lt;Source&gt;)</code>.</p></div> <h3 id="algorithmsforlayout"><a href="#algorithmsforlayout" class="header-anchor">#</a> <code>algorithmsforlayout</code></h3> <p>Attribute to specify the layout mode to adjust the WebView.</p> <ul><li>Type: <code>string</code> (<code>normal</code> | <code>onecolumn</code> | <code>narrowcolumn</code> | <code>textautosize</code>)
<ul><li><code>normal</code>: Rendering is not changed. Recommended for compatibility between different platforms and system versions.</li> <li><code>onecolumn</code>: All content is displayed in one column. The view width is the width of the column.</li> <li><code>narrowcolumn</code>: All columns are not wider than the screen.</li> <li><code>textautosize</code>: The font size of a paragraph is adjusted based on the heuristic method so that the text can be read when you view the wide viewport layout in overview mode. You are advised to enable zooming when using this mode.</li></ul></li> <li>Default value: <code>narrowcolumn</code></li> <li>Mandatory: no</li></ul> <h3 id="wideviewport"><a href="#wideviewport" class="header-anchor">#</a> <code>wideviewport</code></h3> <p>Flag to indicate if the WebView supports HTML <code>meta</code> to control the viewport or the wide viewport.</p> <ul><li>Type: <code>boolean</code> <ul><li><code>false</code>: The layout width is always set to the WebView control width in CSS pixels.</li> <li><code>true</code>: If the web page contains the viewport meta element, the system will use the width specified. If the page does not contain a tag or does not provide a width, the wide viewport is used.</li></ul></li> <li>Default value: <code>true</code></li> <li>Mandatory: no</li></ul> <h3 id="overviewmodeinload"><a href="#overviewmodeinload" class="header-anchor">#</a> <code>overviewmodeinload</code></h3> <p>Flag to indicate if a WebView loads pages in overview mode (i.e., zooming out on the content to make the content width shorter and fit into the screen). This attribute is used when the content width is greater than the width of the WebView, for example, when the wide viewport is enabled.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="multiwindow"><a href="#multiwindow" class="header-anchor">#</a> <code>multiwindow</code></h3> <p>Indicates whether the web element supports multi-window display.</p> <ul><li>Type: <code>boolean</code></li> <li>Default value: <code>false</code></li> <li>Mandatory: no</li></ul> <h3 id="jumppolicy"><a href="#jumppolicy" class="header-anchor">#</a> <code>jumppolicy</code></h3> <p>Indicates the multi-window opening policy.</p> <ul><li>Type: <code>string</code> (<code>browser</code> | <code>default</code>)
<ul><li><code>browser</code>: Multiple windows started in the web element are opened in the system browser.</li> <li><code>default</code>: Multiple windows started in the web element are opened in a quick app.</li></ul></li> <li>Default value: <code>default</code></li> <li>Mandatory: no</li></ul> <h3 id="openinbrowserurl"><a href="#openinbrowserurl" class="header-anchor">#</a> <code>openinbrowserurl</code></h3> <p>Attribute with an array of URLs that will be opened in the system browser. You can indicate them using regular expressions.</p> <ul><li>Type: <code>array</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="xrequestedwithpolicy"><a href="#xrequestedwithpolicy" class="header-anchor">#</a> <code>xrequestedwithpolicy</code></h3> <p>This attribute sets the value of the <code>x-requested-with</code> header in the HTTP/HTTPS request.</p> <ul><li>Type: <code>number</code> <ul><li><code>1</code>: The system uses the implementation by default. The system uses the engine package name by default (i.e., <code>&lt;x-requested-with: packagename&gt;</code>).</li> <li><code>0</code>: The system uses an empty header field value (i.e, <code>&lt;x-requested-with: &gt;</code>).</li></ul></li> <li>Default value: <code>1</code></li> <li>Mandatory: no</li></ul> <h3 id="fullscreendirection"><a href="#fullscreendirection" class="header-anchor">#</a> <code>fullscreendirection</code></h3> <p>Orientation of the web element in full-screen mode.</p> <ul><li>Type: <code>string</code> (<code>landscape</code> | <code>portrait</code>)</li> <li>Default value: <code>landscape</code></li> <li>Mandatory: no</li></ul> <h3 id="initialscale"><a href="#initialscale" class="header-anchor">#</a> <code>initialscale</code></h3> <p>Initial percentage of the content displayed in the web element (in <code>%</code>). If you set this attribute, <code>wideviewport</code> must be <code>false</code>.</p> <ul><li>Type: <code>number</code></li> <li>Default value: -</li> <li>Mandatory: no</li></ul> <h3 id="renamejsinterface"><a href="#renamejsinterface" class="header-anchor">#</a> <code>renamejsinterface</code></h3> <p>Name of the API for the web element to communicate with the HTML page.</p> <ul><li>Type: <code>string</code></li> <li>Default value: <code>system</code></li> <li>Mandatory: no</li></ul> <h1 id="events"><a href="#events" class="header-anchor">#</a> Events</h1> <p>This element supports the <a href="./events">common events</a>, with the exception of <a href="/developers/components/events.html#swipe"><code>swipe</code></a>. In addition to this, this element supports the following events:</p> <ul><li><a href="#pagestart"><code>pagestart</code></a></li> <li><a href="#change"><code>pagefinish</code></a></li> <li><a href="#titlereceive"><code>titlereceive</code></a></li> <li><a href="#error"><code>error</code></a></li> <li><a href="#message"><code>message</code></a></li> <li><a href="#progress"><code>progress</code></a></li></ul> <h3 id="pagestart"><a href="#pagestart" class="header-anchor">#</a> <code>pagestart</code></h3> <p>This event is triggered when a web page starts the loading process.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ url: uri }</code></li></ul> <h3 id="pagefinish"><a href="#pagefinish" class="header-anchor">#</a> <code>pagefinish</code></h3> <p>This event is triggered when a web page is successfully loaded.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ url: uri }</code></li> <li><code>{ canBack: boolean }</code></li> <li><code>{ canForward: boolean }</code></li></ul> <h3 id="titlereceive"><a href="#titlereceive" class="header-anchor">#</a> <code>titlereceive</code></h3> <p>This event is triggered when the a web page title is received.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ title: string }</code></li></ul> <h3 id="error"><a href="#error" class="header-anchor">#</a> <code>error</code></h3> <p>This event is triggered when the web page opening or loading fail.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ errorMsg: string }</code></li></ul> <h3 id="message"><a href="#message" class="header-anchor">#</a> <code>message</code></h3> <p>This event is triggered when a message is received from the web page.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ message: string }</code></li> <li><code>{ url: uri }</code></li></ul> <h3 id="progress"><a href="#progress" class="header-anchor">#</a> <code>progress</code></h3> <p>This event is triggered when the progress of the web page loading changes.</p> <p><strong>Additional parameters</strong>:</p> <ul><li><code>{ newProgress: string }</code> (range <code>0</code> to <code>100</code>).</li></ul> <h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This element has the following methods:</p> <ul><li><a href="#reload"><code>reload()</code></a></li> <li><a href="#forward"><code>forward()</code></a></li> <li><a href="#back"><code>back()</code></a></li> <li><a href="#canforward-callback"><code>canForward({callback})</code></a></li> <li><a href="#canback-callback"><code>canBack({callback})</code></a></li> <li><a href="#postmessage-message"><code>postMessage({message})</code></a></li></ul> <h3 id="reload"><a href="#reload" class="header-anchor">#</a> <code>reload()</code></h3> <p>Force the reload of a page.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>object</code> with the following attributes:
<ul><li><code>index: number</code> (mandatory). Index with the position to display</li></ul></li></ul> <h3 id="forward"><a href="#forward" class="header-anchor">#</a> <code>forward()</code></h3> <p>Load of the next page in the browse history.</p> <h3 id="back"><a href="#back" class="header-anchor">#</a> <code>back()</code></h3> <p>Load of the previous page in the browse history.</p> <h3 id="canforward-callback"><a href="#canforward-callback" class="header-anchor">#</a> <code>canForward({callback})</code></h3> <p>Method to determine if the forward browse option is supported.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>callback: function(res)</code>.</li></ul> <p>The function receives <code>res</code>, a <code>boolean</code> that indicates if the option is supported (<code>true</code>) or not.</p> <h3 id="canback-callback"><a href="#canback-callback" class="header-anchor">#</a> <code>canBack({callback})</code></h3> <p>Method to determine if the backward browse option is supported.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>object</code> with the following attributes:
<ul><li><code>callback: function(res)</code>.</li></ul></li></ul> <p>The function receives <code>res</code>, a <code>boolean</code> that indicates if the option is supported (<code>true</code>) or not.</p> <h3 id="postmessage-message"><a href="#postmessage-message" class="header-anchor">#</a> <code>postMessage({message})</code></h3> <p>Sends messages to a web page.</p> <p><strong>Parameters</strong>:</p> <ul><li><code>object</code> with the following attributes:
<ul><li><code>message: string</code></li></ul></li></ul> <h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <p>Main page component:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container row-center column-center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btn-transparent<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">qaiClick</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>Quick App Initiative<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'@system.router'</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token function">qaiClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
uri<span class="token operator">:</span> <span class="token string">'/Component/basic/web/detail'</span><span class="token punctuation">,</span>
params<span class="token operator">:</span> <span class="token punctuation">{</span> webUrl<span class="token operator">:</span> <span class="token string">&quot;https://quick-app-initiative.ow2.io/&quot;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>Details page, implemented in the component with <code>/Component/basic/web/detail</code> path:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>web</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{webUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">useragent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{ua}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ontitlereceive</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>titleReceived<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>web</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token keyword">public</span><span class="token operator">:</span> <span class="token punctuation">{</span>
webUrl<span class="token operator">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
ua<span class="token operator">:</span><span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">titleReceived</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>title<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$page<span class="token punctuation">.</span><span class="token function">setTitleBar</span><span class="token punctuation">(</span><span class="token punctuation">{</span>text<span class="token operator">:</span> title<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/components/web.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/22/2021, 4:00:01 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/components/text.html" class="prev">
text
</a></span> <span class="next"><a href="/developers/components/div.html">
div
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/41.f5a3fb56.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>APIs and Services Basics | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/53.8ea79d5f.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Guide</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/developers/guide/getting-started.html" class="sidebar-link">Getting Started</a></li><li><a href="/developers/guide/directory.html" class="sidebar-link">Directory Structure</a></li><li><a href="/developers/guide/manifest.html" class="sidebar-link">Manifest</a></li><li><a href="/developers/guide/ux-documents.html" class="sidebar-link">UX Documents</a></li><li><a href="/developers/guide/templates.html" class="sidebar-link">Template Syntax</a></li><li><a href="/developers/guide/styling.html" class="sidebar-link">App Styling</a></li><li><a href="/developers/guide/scripting.html" class="sidebar-link">Scripting</a></li><li><a href="/developers/guide/events.html" class="sidebar-link">Event Handling</a></li><li><a href="/developers/guide/lifecycle.html" class="sidebar-link">App/Page Lifecycle</a></li><li><a href="/developers/guide/i18n.html" class="sidebar-link">Internationalization</a></li><li><a href="/developers/guide/components-basics.html" class="sidebar-link">Components Basics</a></li><li><a href="/developers/guide/api-basics.html" aria-current="page" class="active sidebar-link">APIs and Services Basics</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/guide/api-basics.html#types-of-api-functions" class="sidebar-link">Types of API functions</a></li><li class="sidebar-sub-header"><a href="/developers/guide/api-basics.html#result-codes" class="sidebar-link">Result Codes</a></li></ul></li><li><a href="/developers/guide/background.html" class="sidebar-link">Services Running in Background</a></li><li><a href="/developers/guide/distribution.html" class="sidebar-link">Distribution</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>UI Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>API &amp; Services</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="apis-and-services-basics"><a href="#apis-and-services-basics" class="header-anchor">#</a> APIs and Services Basics</h1> <p>Quick apps enable to use of built-in and external services and APIs in a modular way.</p> <p>See the list of <a href="../services">available services</a>.</p> <p>In the case of the <a href="../services">built-in services</a>, you need to declare the specific APIs your app uses in the <a href="../guide/manifest">manifest</a>, so the system will be able to include the libraries in the compilation phase.</p> <p>For instance, if your app uses the <a href="../services/calendar">calendar API</a>:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;features&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;system.calendar&quot;</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Since the <a href="/developers/services/">services and APIs</a> are based on JavaScript modules, they are exported and imported using the standard <code>export</code> and <code>import</code> keywords on the app scripts.</p> <p>For instance, if you are using the <a href="../services/fetch">Fetch API</a>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> fetch <span class="token keyword">from</span> <span class="token string">&quot;@system.fetch&quot;</span>
</code></pre></div><h2 id="types-of-api-functions"><a href="#types-of-api-functions" class="header-anchor">#</a> Types of API functions</h2> <p>The <a href="/developers/services/">APIs</a> may include four types of functions:</p> <ul><li>synchronous methods,</li> <li>asynchronous methods,</li> <li>callback functions, and</li> <li>asynchronous callback functions.</li></ul> <h3 id="synchronous-methods"><a href="#synchronous-methods" class="header-anchor">#</a> Synchronous methods</h3> <p>A synchronous method is a function that directly returns the result (of any type).</p> <p>For details, please refer to the concrete <a href="../services">API reference</a>.</p> <p>Example of a synchronous method (<code>app.getInfo()</code>):</p> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span><span class="token function">getInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="asynchronous-methods"><a href="#asynchronous-methods" class="header-anchor">#</a> Asynchronous methods</h3> <p>An asynchronous method is a function that doesn't return the result directly, so the execution of the code continues in different threads instead of waiting for the result. When the method ends the execution, it runs a series of callback functions.</p> <p>There are two types of asynchronous call functions, <em>asynchronous callback functions</em>, and <em>Promises</em>.</p> <h4 id="asynchronous-callbacks"><a href="#asynchronous-callbacks" class="header-anchor">#</a> Asynchronous Callbacks</h4> <p>Quick app asynchronous methods include the following callback functions.</p> <h5 id="success-data"><a href="#success-data" class="header-anchor">#</a> <code>success(data)</code></h5> <p>This function is called after a successful execution.</p> <p>Parameters:</p> <ul><li><code>data</code> (type depends on the concrete <a href="../services">API</a>)</li></ul> <h5 id="fail-data-code"><a href="#fail-data-code" class="header-anchor">#</a> <code>fail(data, code)</code></h5> <p>This function is called after a failure in the execution.</p> <p>Parameters:</p> <ul><li><code>data</code> (type depends on the concrete <a href="/developers/services/">API</a>). Indicates the type of error.</li> <li><code>code</code> (<code>number</code>). This parameter indicates an error code. Unless otherwise stated, <code>200</code> is returned. Other error codes must be defined in the <a href="/developers/services/">API reference</a>.</li></ul> <h5 id="cancel-data"><a href="#cancel-data" class="header-anchor">#</a> <code>cancel(data)</code></h5> <p>This function is called when the task is canceled.</p> <p>Parameters:</p> <ul><li><code>data</code> (type depends on the concrete <a href="/developers/services/">API</a>)</li></ul> <p>The parameter indicates the execution result, which is generally empty. For details, please refer to the <a href="/developers/services/">API reference</a>.</p> <h5 id="complete"><a href="#complete" class="header-anchor">#</a> <code>complete()</code></h5> <p>This function is called once the method completes its execution (it could be either success or failure).</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>The three callback functions <code>success</code>, <code>fail</code>, and <code>cancel</code> are mutually exclusive. One of them will be called based on the execution result.
When this callback is complete, the complete function is always executed.</p></div> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code>prompt<span class="token punctuation">.</span><span class="token function">showContextMenu</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
itemList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'item1'</span><span class="token punctuation">,</span> <span class="token string">'item2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
itemColor<span class="token operator">:</span> <span class="token string">'#ff33ff'</span><span class="token punctuation">,</span>
<span class="token function">success</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'handling callback'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">fail</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">handling fail, code= </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>code<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">cancel</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'handling cancel'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">complete</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'handling complete'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="promises"><a href="#promises" class="header-anchor">#</a> Promises</h4> <p>Asynchronous methods support <em>Promises</em>, which enable asynchronous programming for higher readability and better control.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Promises cannot be used in quick app widgets.</p></div> <p>If the asynchronous method doesn't receive <a href="#asynchronous-callbacks">callback functions</a> (<code>success</code>, <code>fail</code>, <code>cancel</code>, or <code>complete</code>), the method returns a <em>Promise</em> object.</p> <p>For instance, the following example using the <a href="../services/device"><code>system.device</code> API</a>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> device <span class="token keyword">from</span> <span class="token string">'@system.device'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token function">onInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
device<span class="token punctuation">.</span><span class="token function">getDeviceId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> err<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p>In the previous example, the value returned by <code>device.getDeviceId()</code> is a <em>Promise</em> object.</p> <p>If the method execution is successful, the returning object includes a <code>{data}</code> object with the concrete information.</p> <p>In the previous example, a successful output would be:</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token punctuation">{</span><span class="token string">&quot;data&quot;</span>:<span class="token punctuation">{</span><span class="token string">&quot;deviceId&quot;</span><span class="token builtin class-name">:</span><span class="token string">&quot;ef6b11f-7XXX-21f7-fbcf-a3fb234b4a30&quot;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre></div><p>You can also use <code>res.code</code> to get the error code in case of failure.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>If you want to use the <code>await</code> method, you must add <code>@babel/runtime/regenerator</code> first:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> injectRef <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">getPrototypeOf</span><span class="token punctuation">(</span>global<span class="token punctuation">)</span> <span class="token operator">||</span> global<span class="token punctuation">;</span>
<span class="token comment">// injection regeneratorRuntime </span>
injectRef<span class="token punctuation">.</span>regeneratorRuntime <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@babel/runtime/regenerator'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <h3 id="callbacks"><a href="#callbacks" class="header-anchor">#</a> Callbacks</h3> <p>Like an asynchronous method, a callback method does not return the execution result directly. After its execution, it runs a callback function you defined instead. Unlike an asynchronous method, a callback API may have several functions as a result.</p> <p>The APIs with methods supporting callbacks define the following callback functions:</p> <ul><li><code>callback(data)</code></li> <li><code>fail(data)</code></li></ul> <h4 id="callback-data"><a href="#callback-data" class="header-anchor">#</a> <code>callback(data)</code></h4> <p>This function is executed once the result is obtained, which may be called multiple times.</p> <p>Parameters:</p> <ul><li><code>data</code> (its type depends on the concrete <a href="/developers/services/">API</a>)</li></ul> <h4 id="fail-data"><a href="#fail-data" class="header-anchor">#</a> <code>fail(data)</code></h4> <p>This function is executed in case of failure. This may be launched only once.</p> <p>Parameters:</p> <ul><li><code>data</code> (its type depends on the concrete <a href="/developers/services/">API</a>)</li></ul> <p>Example:</p> <ul><li>Using <code>geolocation.subscribe</code> to listen to geographical location changes. The system will run the given callback function with the new location after the value changes.</li> <li>If the user refuses to grant the location permission, the system will launch the <code>fail</code> callback function, ending the execution.</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>geolocation<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token function">callback</span><span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;handling callback&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">fail</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">handling fail, code= </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>code<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="asynchronous-callbacks-2"><a href="#asynchronous-callbacks-2" class="header-anchor">#</a> Asynchronous Callbacks</h3> <p>Like an asynchronous method, an asynchronous callback function doesn't return the result directly. It calls a proper callback function you define.</p> <p>The difference from an asynchronous method is that an asynchronous callback function only accepts one <code>callback</code> function, and it can be only called once.</p> <h4 id="callback-data-2"><a href="#callback-data-2" class="header-anchor">#</a> <code>callback(data)</code></h4> <p>Parameters:</p> <ul><li><code>data</code> (its type depends on the concrete <a href="/developers/services/">API</a>)</li></ul> <p>For instance:</p> <div class="language-js extra-class"><pre class="language-js"><code>alipay<span class="token punctuation">.</span><span class="token function">pay</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
orderInfo<span class="token operator">:</span> <span class="token string">&quot;order1&quot;</span><span class="token punctuation">,</span>
<span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ret</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;handling callback&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="result-codes"><a href="#result-codes" class="header-anchor">#</a> Result Codes</h2> <p>Most of the APIs use the following codes to indicate the result of the execution of a function.</p> <ul><li><code>200</code>: Common error.</li> <li><code>201</code>: The operation is rejected by a user.</li> <li><code>202</code>: A parameter is invalid.</li> <li><code>203</code>: A service is unavailable.</li> <li><code>204</code>: A request timed out.</li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/guide/api-basics.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/25/2021, 2:41:54 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
<a href="/developers/guide/components-basics.html" class="prev">
Components Basics
</a></span> <span class="next"><a href="/developers/guide/background.html">
Services Running in Background
</a>
</span></p></div> </main></div><div class="global-ui"><!----></div></div>
<script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/53.8ea79d5f.js" defer></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Services Running in Background | Quick Apps</title>
<meta name="generator" content="VuePress 1.9.5">
<meta name="description" content="Quick App reference guide for developers">
<meta name="theme-color" content="#38b5ff">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/54.194cf5af.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/107.0984490c.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
<link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link">
API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
Quick App Initiative
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
UI Components