<div id="main-content" class="wiki-content group">
<h1 id="CustomizaçãodeFormulárioMobile-Índice">Contents</h1>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412696021677 {
padding: 0px;
}
div.rbtoc1412696021677 ul {
list-style: none;
margin-left: 0px;
}
div.rbtoc1412696021677 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412696021677'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a
href='#CustomizaçãodeFormulárioMobile-FormulárioMobile'>Mobile
Form</a></li>
<li><span class='TOCOutline'>2</span> <a
href='#CustomizaçãodeFormulárioMobile-RecomendaçõesparaProcessoscomFormulárioMobile'>Recommendations
for processes with Mobile Form</a></li>
<li><span class='TOCOutline'>3</span> <a
href='#CustomizaçãodeFormulárioMobile-Benefícios'>Benefits</a></li>
<li><span class='TOCOutline'>4</span> <a
href='#CustomizaçãodeFormulárioMobile-CriandoumFormulárioMobile'>Creating
a Mobile Form</a></li>
<li><span class='TOCOutline'>5</span> <a
href='#CustomizaçãodeFormulárioMobile-CustomizandodeFormulárioMobile'>Customizing
Mobile Form</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>5.1</span> <a
href='#CustomizaçãodeFormulárioMobile-CSS'>CSS</a></li>
<li><span class='TOCOutline'>5.2</span> <a
href='#CustomizaçãodeFormulárioMobile-jQueryMobile'>jQuery
Mobile</a></li>
<li><span class='TOCOutline'>5.3</span> <a
href='#CustomizaçãodeFormulárioMobile-JavaScript'>JavaScript</a></li>
<li><span class='TOCOutline'>5.4</span> <a
href='#CustomizaçãodeFormulárioMobile-Serviços'>Services</a></li>
<li><span class='TOCOutline'>5.5</span> <a
href='#CustomizaçãodeFormulárioMobile-TraduçãodeFormulários'>Translation
of forms</a></li>
<li><span class='TOCOutline'>5.6</span> <a
href='#CustomizaçãodeFormulárioMobile-PaiFilhoparadispositivosmóveis'>Parent
Child pages for mobile devices</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>5.6.1</span> <a
href='#CustomizaçãodeFormulárioMobile-getValue'>getValue</a></li>
<li><span class='TOCOutline'>5.6.2</span> <a
href='#CustomizaçãodeFormulárioMobile-getValues'>getValues</a></li>
<li><span class='TOCOutline'>5.6.3</span> <a
href='#CustomizaçãodeFormulárioMobile-getValuesBySequence'>getValuesBySequence</a></li>
<li><span class='TOCOutline'>5.6.4</span> <a
href='#CustomizaçãodeFormulárioMobile-getValuesByField'>getValuesByField</a></li>
</ul></li>
<li><span class='TOCOutline'>5.7</span> <a
href='#CustomizaçãodeFormulárioMobile-InsiraanexosdasolicitaçãodiretamentedoFormulário'>Insert
request attachments directly from forms</a></li>
<li><span class='TOCOutline'>5.8</span> <a
href='#CustomizaçãodeFormulárioMobile-ComoidentificarqueestouusandooMobilenoseventos?'>How
to identify that I'm using Mobile in the events?</a></li>
<li><span class='TOCOutline'>5.9</span> <a
href='#CustomizaçãodeFormulárioMobile-Exemplo'>Example</a></li>
</ul></li>
</ul>
</div>
</p>
<h1 id="CustomizaçãodeFormulárioMobile-FormulárioMobile">Mobile
Form</h1>
<p>In Fluig, it is possible to handle workflow requests from mobile
applications. Consequently, when saving a form in Fluig, a Mobile Form
is automatically generated, according to the field mapping of the
process forms.</p>
<p>In spite of the automatic generation feature of Fluig, there are
several points of interest for the development and customization of
Mobile Forms, which will be dealt with throughout this guide.</p>
<p> </p>
<h1
id="CustomizaçãodeFormulárioMobile-RecomendaçõesparaProcessoscomFormulárioMobile">Recommendations
for Processes with Mobile Forms</h1>
<p> </p>
<ol>
<li><p>
<strong>Responsive Form:</strong> On the market today there are
varying sizes of screens and resolutions, so any form developed for
Mobile should be responsive, i.e. it should fit any screen size.<br /> 
</p></li>
<li><p>
<strong>Aesthetics:</strong> The visual appearance and HTML design
must be attractive to users; we have achieved it through CSS or
jQueryMobile, which will be explained in the next sections.<br />  
</p></li>
<li><p>
<strong>Usability:</strong> The form must be easy to use,
containing only fields that are important for tasks or processes.<br /> 
</p></li>
<li><p>
<strong>Click area:</strong> HTML elements must be well
positioned in a manner that facilitates the click area because there
are devices today whose screens are too small. Here is an example:
</p>
<p> </p>
<p style="text-align: center;">
<img class="confluence-embedded-image image-center" width="500"
src="attachments/146181573/152700504.png"
data-image-src="attachments/146181573/152700504.png"><br /> 
</p></li>
<li><p>
<strong>Positioning of the actions: </strong>The most important
actions must be placed where the user can easily access them, as
shown in the figure:
</p>
<p style="text-align: center;">
<img class="confluence-embedded-image" width="500"
src="attachments/146181573/146118235.png"
data-image-src="attachments/146181573/146118235.png">
</p>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="attachments/146181573/146118236.png"
data-image-src="attachments/146181573/146118236.png"><br /> 
</p></li>
<li><strong>Customizations: </strong>The customizations must
be made within the process events or form definitions on the Web. All
the events that are applied in web forms are also applied in Mobile
Forms. For more information, visit the guide <a
href="75270483.html">Customization of forms</a>.<br />
<br /></li>
<li><strong>Attached files: </strong>The attached files from
the Web form are not loaded onto the Mobile form, so the CSS and
Javascript functions should be implemented within the HTML Mobile.<br />
<br /></li>
<li><strong>Access to internal and external
services: </strong>Any access to <em>Webservices</em> or other external
or internal services must be done via javascript. We recommend the
use of<em> jQuery Soap</em> for <em>Webservices</em>.<br />
<br /></li>
<li><strong>Not all information needs to be in the
Mobile Form:</strong> The great restrain in Mobile is the screen size,
so map the most important fields so that they are prioritized in the
form. There are informative fields that don't have great utility for
the process or tasks; they don't need to be included in Mobile Form.<br />
<br /></li>
<li><strong>Types: </strong>The Mobile Form definitions support
types:<br />
<ol>
<li>text</li>
<li>textArea</li>
<li>radio</li>
<li>select</li>
<li>combobox</li>
<li>checkbox.<br />
<br /></li>
</ol></li>
</ol>
<h1 id="CustomizaçãodeFormulárioMobile-Benefícios">
<span style="color: rgb(0, 0, 0);">Benefits</span>
</h1>
<p>
<strong>Why should I use Mobile Form?</strong>
</p>
<ul>
<li>It allows you to start/handle requests from any mobile device
regardless of their geographic location.</li>
<li>Quick access to the information, showing only the most
relevant information.</li>
<li>It allows the continuation of the process, even outside the
corporate environment.</li>
<li>Through the feature "Off-line process" I can fill in
information even without access to the internet, for future
synchronization.<br />
<br />
<br />
</li>
</ul>
<h1 id="CustomizaçãodeFormulárioMobile-CriandoumFormulárioMobile">Creating
a Mobile Form</h1>
<p>In Fluig you can create form definitions in different ways,
using Fluig Studio, through the modeling of the workflow processes or
through upload form in document navigation.</p>
<p>Now browse the tabs below and follow the ways to create forms:</p>
<p> </p>
<a name="composition-deck-install-windows"></a>
<div id="install-windows" class="deck" history="false"
loopcards="false" effecttype="fade" effectduration="0.5"
nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Fluig Studio" title="Select the language"
nextafter="0" effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Fluig Studio</strong>
</p>
<p>
To add a new form with support for mobile devices, execute the
standard procedure for <a
href="http://tdn.totvs.com/pages/viewpage.action?pageId=73894420#GuiaRapidoFluig-Definicaodeformulario"
rel="nofollow">export of form</a> and select the fields that will
compose the Mobile Form on the screen before the conclusion of the
export.
</p>
<p>
After the export, another HTML file marked as "mobile" in the
folder <em>forms</em> of the<strong>Fluig</strong> project will be
included. 
</p>
<p> </p>
<p>See in the following image the mobile selection screen when
exporting a form:</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237525.png"
data-image-src="attachments/75270483/75237525.png">
</p>
<p style="text-align: center;">
<strong>Figure 15 - Mobile Form.</strong>
</p>
<p> </p>
<p>After the export, the form must be as the following image:</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/75270483/75237524.png"
data-image-src="attachments/75270483/75237524.png">
</p>
<p> </p>
<div class="aui-message hint shadowed information-macro">
<p class="title">Note</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>
After Fluig has identified the Mobile Form by name, it must have
the same name as the web form plus the word<strong> <em>"_
ecmMobile"</em></strong>.
</p>
<p>
<strong>Example:</strong> After the web form "compras.html" has
been created, the Mobile Form necessarily must be named: <em><strong>"compras_ecmmobile.html"</strong></em>. 
</p>
</div>
</div>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Formul&aacute;rio Mobile em Processos"
title="Terms of Use" nextafter="0" effecttype="default"
effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Setting Mobile Form in Processes</strong>
</p>
<p>
You can enable the creation of Mobile Form through the <strong>Form
Generator</strong>, as in the step below:
</p>
<p> </p>
<p>
<strong>Step 1: </strong>Create or edit an existing process
and click the item <strong>Form</strong>.
</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/146181573/146120006.png"
data-image-src="attachments/146181573/146120006.png">
</p>
<p> </p>
<p>
<strong>Step 2: </strong>Select the target folder where the
form will be published, also assign a title and description. After
that, click <strong>Create form.</strong>
</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/146181573/146120007.png"
data-image-src="attachments/146181573/146120007.png">
</p>
<p> </p>
<p>
<strong>Step 3: </strong> Include fields and in each of
them, select whether this will also be added to the form for mobile
devices by clicking on the option <strong>Mobile Form?</strong>.
</p>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="attachments/146181573/146120001.png"
data-image-src="attachments/146181573/146120001.png">
</p>
<p> </p>
<div class="aui-message hint shadowed information-macro has-no-icon">
<p class="title">Information</p>
<div class="message-content">
<p>
Not all mapped fields on the process form can be mapped onto the
form for mobile devices. The fields that can be mapped show the
option <strong>"Mobile Form?".</strong>
</p>
</div>
</div>
<p>
<br />
<br />
</p>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Upload via Navega&ccedil;&atilde;o de Documentos"
title="Fluig installation" nextafter="0" effecttype="default"
effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Upload via Document browsing</strong>
</p>
<p>
In the upload via document browsing a standard post of form is
executed where the web form must have a defined name and the term <strong>_ecmmobile</strong>
must be added to the Mobile Form. 
</p>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/146181573/146120021.png"
data-image-src="attachments/146181573/146120021.png">
</p>
<p> </p>
<div class="aui-message hint shadowed information-macro">
<p class="title">Note</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>
After Fluig has identified the Mobile Form by name, the Mobile
Form must have the same name as the web form plus the word<strong> <em>"_ecmMobile"</em></strong>.
</p>
<p>
<strong>Example:</strong> After the web form "compras.html" has
been created, the Mobile Form necessarily must be named: <em><strong>"compras_ecmmobile.html"</strong></em>. 
</p>
</div>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<p class="title">Attention</p>
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<p>Form definitions generated by the methods of creation listed
above need to be edited; in case there is need for any special
customization, they are automatically generated containing the
basic items for its functioning.</p>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<h1 id="CustomizaçãodeFormulárioMobile-CustomizandodeFormulárioMobile">Customizing
the Mobile Form</h1>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">With the
inclusion of forms that support visualization on mobile devices, it
is possible to handle workflow requests and fill in the form
information with greater mobility and agility.</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">As we
have seen, the Mobile Form does not load file attachments so all the
customization must be done within the HTML, which has a number of
peculiarities that will be addressed below:</span>
</p>
<h3 id="CustomizaçãodeFormulárioMobile-CSS">
<strong style="font-size: 1.4em;">CSS</strong>
</h3>
<p>To customize a Mobile Form, the CSS used for the Web part
probably does not apply to mobile device file, so it is recommended
that the Mobile Form uses its own CSS to keep the form responsive.</p>
<p>
The CSS should be inserted inside the <strong>head</strong> in
the file <em>.html</em> Mobile with the tag:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">< style type = "text/css" > Enter CSS here </style>.</pre>
</div>
</div>
<p> </p>
<p>Now browse the tabs below and follow some examples of CSS
components that can be applied in Mobile Forms:</p>
<p> </p>
<a name="composition-deck-install-windows"></a>
<div id="install-windows" class="deck" history="false"
loopcards="false" effecttype="fade" effectduration="0.5"
nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Body" title="Select the language" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Body</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
min-width: 300px;
}</pre>
</div>
</div>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Headings" title="Terms of Use" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Headings</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}</pre>
</div>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="List" title="Fluig installation" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>List</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
position:relative;
}</pre>
</div>
</div>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Label" title="Fluig installation" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Label</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">. mylabel {
width: 28%;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
position:relative;
float:left;
line-height: 32px;
}</pre>
</div>
</div>
</div>
<div id="5" class="deck-card " style="" cssclass="" accesskey=""
label="Input Text" title="Fluig installation" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Input Text</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">input [type = text] {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
}</pre>
</div>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="TextArea" title="Fluig installation" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>TextArea</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">textarea {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
}</pre>
</div>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Select" title="Fluig installation" nextafter="0"
effecttype="default" effectduration="-1.0">
<p>
<strong><br /></strong>
</p>
<p>
<strong>Select</strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: css; gutter: false"
style="font-size: 12px;">select {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
}</pre>
</div>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p>You must handle in the CSS all the components that will be used
in your HTML Mobile so all of them follow the same standard, your HTML
Mobile with CSS should have this structure:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">< html >
<head>
<title> Purchase Form </title>
< style type = "text/css" >
<!--here you must add the CSS structure of each component-->
</style>
</head>
<body>
</ body >
</html></pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<p class="title">Attention</p>
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<p>This is the basic structure, which, within each tag, must have
corresponding elements and logic.</p>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulárioMobile-jQueryMobile">jQuery Mobile</h3>
<p>
jQuery Mobile is a <em>framework</em> for interface of mobile devices
that aims to give a responsive layout to form definitions. It greatly
facilitates the development, because you don't need to create a CSS
for each element and it can be used in Fluig Mobile. <span
style="font-size: 10.0pt; line-height: 13.0pt;">It is possible
to follow examples in the link: </span><a
href="http://demos.jquerymobile.com/1.4.2/"
style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
rel="nofollow">http://demos.jquerymobile.com/1.4.2/</a>.
</p>
<p> </p>
<p>This can be embedded into Mobile HTML in a simple way:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">< html >
<head>
<script type ="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
</head>
<body>
</ body >
</html></pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulárioMobile-JavaScript">JavaScript</h3>
<p>
As well as the CSS, javascript must also be within the HTML Mobile, so
all the logic that on the web is usually in <strong>.js</strong> files
should be transferred to the Mobile Form.
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">To keep
organization within the HTML, we recommend leaving the logics at the
end of the file:</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
/* Here you should add logic javascript */
</script></pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<p class="title">Attention</p>
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<p>
To test the Mobile Form, open the html Mobile file in a browser on
the desktop. <span style="font-size: 10.0pt; line-height: 13.0pt;">If
there are no inconsistencies, the form will probably open correctly
in Fluig Mobile as well.</span>
</p>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulárioMobile-Serviços">Services</h3>
<p>
In order to use internal or external services to Fluig, it is
necessary to instantiate, execute and handle the return of service via
javascript. For <em>webservices</em>, we recommend the use of <a
href="http://plugins.jquery.com/soap" class="external-link"
rel="nofollow">jQuery Soap</a>.
</p>
<p>Here are a few tips:</p>
<ul>
<li>The use of Fluig internal services, such as Dataset, should
be made preferably in customizing events for <a
href="75270483.html">Form</a>and <a href="73082818.html">Processes</a>,
so what will be customized for the web will also be adopted for
mobiles, avoiding code replication.
</li>
<li>Special techniques for web forms, such as the dataset calls
within the form, are not applied to Mobile. </li>
</ul>
<p> </p>
<h3 id="CustomizaçãodeFormulárioMobile-TraduçãodeFormulários">Translation
of forms</h3>
<p>
The translation of Mobile Forms must be made by following the guide
to <a
href="http://tdn.totvs.com/pages/viewpage.action?pageId=75270483#CustomizaçãodeFormulários-Traduçãodeformulários"
style="font-size: 10.0pt; line-height: 13.0pt;" rel="nofollow">Translation
of Forms</a><span style="font-size: 10.0pt; line-height: 13.0pt;"> </span><span
style="font-size: 10.0pt; line-height: 13.0pt;">. However, the
difference is that you will need to add three new files with the
literals following the nomenclature below:</span>
</p>
<ul>
<li><strong>Portuguese:</strong> name_of_mobile_form_pt_BR.
properties;</li>
<li><strong>English:</strong> name_of_mobile_form_en_US.
properties;</li>
<li><strong>Spanish:</strong> name_of_mobile_form_es.
properties.</li>
</ul>
<div>
<strong>Example</strong>: If the form is called <strong>compras_ecmmobile</strong>,
then the <em>.properties</em> file names will be:
</div>
<div>
<ul>
<li>compras_ecmmobile_pt_BR.properties;</li>
<li>purchases_ecmmobile_en_US.properties;</li>
<li>compras_ecmmobile_es.properties.</li>
</ul>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulárioMobile-PaiFilhoparadispositivosmóveis">Parent
Child pages for mobile devices</h3>
<p>The fields that employ the technique of parent and child pages
are not inserted into the automatically generated form for mobile
devices by Fluig. But the product allows you to develop a customized
form for mobile devices by consulting these fields.</p>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">The editing of parent and child
fields through mobile devices is not possible, even in customized
forms. These fields are available only for consultation.</div>
</div>
<p> </p>
<p>
The query to the parent and child fields on mobile devices is
performed by means of javaScript functions available within the <strong>masterList</strong>
object when the form is displayed. They are:
</p>
<p> </p>
<h4 id="CustomizaçãodeFormulárioMobile-getValue">getValue</h4>
<p>
<span>Returns a string with the value of a parent and child
field, receiving the sequence number of the child, and the name of
the field as parameters.</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValue (sequence, field);</pre>
</div>
</div>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<h4 id="CustomizaçãodeFormulárioMobile-getValues">getValues</h4>
<p>Returns an object with all the values of the parent and child
fields, grouped by sequence number. This method has no parameters.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValues ();</pre>
</div>
</div>
<p> </p>
<h4 id="CustomizaçãodeFormulárioMobile-getValuesBySequence">getValuesBySequence</h4>
<p>Returns an object with all the values of the fields of a given
sequence. Receives the sequence number as parameter.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValuesBySequence(sequence);</pre>
</div>
</div>
<p>
<span><br /></span>
</p>
<h4 id="CustomizaçãodeFormulárioMobile-getValuesByField">getValuesByField</h4>
<p>Returns all the sequences and values of a given field. Receives
the name of the field as parameter.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: xml; gutter: false"
style="font-size: 12px;">masterList.getValuesByField (field);</pre>
</div>
</div>
<h3
id="CustomizaçãodeFormulárioMobile-InsiraanexosdasolicitaçãodiretamentedoFormulário">Insert
request attachments directly from the form.</h3>
<p>
There is a very simple way to save attachments upload through a button
on the form. To do this, it is necessary to insert in the event <strong
style="line-height: 1.4285715;"><em>onclink</em></strong> of the
<strong style="line-height: 1.4285715;"><em>button</em></strong> the
method <em><strong>showCamera</strong></em>:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: xml; gutter: false"
style="font-size: 12px;"><input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
 
<script language="javascript">
function showCamera (parameter) {
JSInterface.showCamera(parameter);
}
</script></pre>
</div>
</div>
<p>
The parameter <em
style="font-family: Calibri, sans-serif; font-size: 11.0pt; line-height: 107.0%;"><strong>name_of_attachment</strong></em>
is a string and corresponds to the name of the attachment that will be
saved in the list of attachments of that request. 
</p>
<p> </p>
<h3
id="CustomizaçãodeFormulárioMobile-ComoidentificarqueestouusandooMobilenoseventos?">How
to identify that I'm using Mobile in the events?</h3>
<p>With this feature, it is possible to apply a customization
and/or restriction only in the Mobile Form, regardless of the Web. So,
I can define that a process or activity will receive a distinguished
value or that a particular activity cannot be performed by Mobile via
customization.</p>
<p> </p>
<p>There are two ways to do this customization:</p>
<ul>
<ul>
<li><strong>Form events</strong><br />All the events that
receive the form in the method can have a unique customization for
the Mobile Form, namely:
<ul>
<li>AfterProcessing</li>
<li>AfterSaveNew</li>
<li>BeforeProcessing</li>
<li>DisplayFields</li>
<li>EnableFields</li>
<li>InputFields</li>
<li>ValidateForm</li>
</ul>
<p>
To use the event, it is necessary to make the following call <strong
style="line-height: 1.4285715;">form.getMobile()</strong>, which
returns a Boolean indicating whether it is a Mobile Form or not.
Example:<br />
<br />
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function displayFields(form, customHTML) {
if ( form.getMobile() != null && form.getMobile()) {
form.setValue('mtr_usuario', new java.lang.Integer(123456));
}
}</pre>
</div>
</div>
<p>
<br />
<br />
</p></li>
</ul>
</ul>
<ul>
<li style="list-style-type: none; background-image: none;"><ul>
<li><p>
<strong>Process events</strong><br />In the process events, the
property <strong>WKMobile</strong> identifies if the action was
performed by the mobile device, it can be used in the process
events as in the example:<br />
<br />
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function beforeStateEntry(sequenceId){
var isMobile = getValue("WKMobile");
if (isMobile!=null && isMobile==true){
throw "this process cannot be executed by mobile.";
}
}</pre>
</div>
</div></li>
</ul></li>
</ul>
<h3 id="CustomizaçãodeFormulárioMobile-Exemplo">Example</h3>
<p>
Please <strong>download</strong> the example files <a
href="attachments/75270483/144081017.zip">here</a>. 
</p>
<p>Below is an example of a form that has been mapped for use on
mobile devices:</p>
<p> </p>
<ul>
<li><strong>Web Form</strong></li>
</ul>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="attachments/146181573/146118707.png"
data-image-src="attachments/146181573/146118707.png">
</p>
<p> </p>
<ul>
<li><strong>Mobile Form</strong></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="attachments/146181573/146118709.png"
data-image-src="attachments/146181573/146118709.png">
</p>
<p> </p>
<div class="aui-message hint shadowed information-macro">
<p class="title">Note</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>As we can see, the Web Form has many fields and its mapping
for mobile devices must be done very carefully.</p>
<p>
The fields <strong>Proposal Data</strong> were mapped for Mobile,
note that there are fields that do not exist in the Mobile as they
are not necessary in this context:
</p>
<p>
<img class="confluence-embedded-image image-center" width="500"
src="attachments/146181573/146118715.png"
data-image-src="attachments/146181573/146118715.png">
</p>
</div>
</div>
<p> </p>
<p>
Items that are in a table can be transformed into a <em><span
style="font-size: 10.0pt; line-height: 13.0pt;">collapsible </span></em><span
style="font-size: 10.0pt; line-height: 13.0pt;">of
jQueryMobile.</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">By
clicking the button <strong>'+'</strong>, the item is expanded:
</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<p>
<img class="confluence-embedded-image" width="500"
src="attachments/146181573/146118720.png"
data-image-src="attachments/146181573/146118720.png">
</p>
</div>
|