HTML


<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>&#160;</p>
	<h1
		id="CustomizaçãodeFormulárioMobile-RecomendaçõesparaProcessoscomFormulárioMobile">Recommendations
		for Processes with Mobile Forms</h1>
	<p>&#160;</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 />&#160;
			</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 />&#160;&#160;
			</p></li>
		<li><p>
				<strong>Usability:</strong>&#160;The form must be easy to use,
				containing only fields that are important for tasks or processes.<br />&#160;
			</p></li>
		<li><p>
				<strong>Click area:</strong>&#160;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>&#160;</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 />&#160;
			</p></li>
		<li><p>
				<strong>Positioning of the actions:&#160;</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 />&#160;
			</p></li>
		<li><strong>Customizations:&#160;</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&#160;<a
			href="75270483.html">Customization of forms</a>.<br />
		<br /></li>
		<li><strong>Attached files:&#160;</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:&#160;</strong>Any access to <em>Webservices</em> or other external
			or internal services must be done via javascript. We recommend the
			use of<em>&#160;jQuery Soap</em> for <em>Webservices</em>.<br />
		<br /></li>
		<li><strong>Not all information needs to be in the
				Mobile Form:</strong>&#160;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>&#160;</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.&#160;
				</p>
				<p>&#160;</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>&#160;</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>&#160;</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>&#160;<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:&#160;<em><strong>"compras_ecmmobile.html"</strong></em>.&#160;
						</p>
					</div>
				</div>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Formul&amp;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&#160;<strong>Form
						Generator</strong>, as in the step below:
				</p>
				<p>&#160;</p>
				<p>
					<strong>Step 1:&#160;</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>&#160;</p>
				<p>
					<strong>Step 2:&#160;</strong>Select the target folder where the
					form will be published, also assign a title and description. After
					that, click&#160;<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>&#160;</p>
				<p>
					<strong>Step 3:&#160;</strong>&#160;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>&#160;</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&amp;ccedil;&amp;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.&#160;
				</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="attachments/146181573/146120021.png"
						data-image-src="attachments/146181573/146120021.png">
				</p>
				<p>&#160;</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>&#160;<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:&#160;<em><strong>"compras_ecmmobile.html"</strong></em>.&#160;
						</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>&#160;</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&#160;<strong>head</strong>&#160;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;">&lt; style type = "text/css" > Enter CSS here &lt;/style>.</pre>
		</div>
	</div>
	<p>&#160;</p>
	<p>Now browse the tabs below and follow some examples of CSS
		components that can be applied in Mobile Forms:</p>
	<p>&#160;</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>&#160;</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;">&lt; html >
&lt;head>
&lt;title> Purchase Form &lt;/title>
&lt; style type = "text/css" >
 &lt;!--here you must add the CSS structure of each component-->
&lt;/style>
&lt;/head>
&lt;body>
&lt;/ body >
&lt;/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>&#160;</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.&#160;<span
			style="font-size: 10.0pt; line-height: 13.0pt;">It is possible
			to follow examples in the link:&#160;</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>&#160;</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;">&lt; html >
&lt;head>
&lt;script type ="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> &lt;/script>
&lt;/head>
&lt;body>
&lt;/ body >
&lt;/html></pre>
		</div>
	</div>
	<p>&#160;</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;">&lt;html>
&lt;head>
&lt;/head>
&lt;body>
&lt;/body>
&lt;/html>
&lt;script language="javascript">
 /* Here you should add logic javascript */
&lt;/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>&#160;</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&#160;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.&#160;</li>
	</ul>
	<p>&#160;</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&#160;<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;">&#160;</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>&#160;name_of_mobile_form_pt_BR.
			properties;</li>
		<li><strong>English:</strong>&#160;name_of_mobile_form_en_US.
			properties;</li>
		<li><strong>Spanish:</strong>&#160;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>&#160;</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>&#160;</p>
	<p>
		The query to the parent and child fields on mobile devices is
		performed by means of javaScript functions available within the&#160;<strong>masterList</strong>
		object when the form is displayed. They are:
	</p>
	<p>&#160;</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>&#160;</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>&#160;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;">&lt;input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
&#160;
&lt;script language="javascript">
          
          function showCamera (parameter) {
              JSInterface.showCamera(parameter);
          }
&lt;/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.&#160;
	</p>
	<p>&#160;</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>&#160;</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&#160;<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 &amp;&amp; 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 &amp;&amp; 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&#160;<a
			href="attachments/75270483/144081017.zip">here</a>.&#160;
	</p>
	<p>Below is an example of a form that has been mapped for use on
		mobile devices:</p>
	<p>&#160;</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>&#160;</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>&#160;</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>&#160;</p>
	<p>
		Items that are in a table can be transformed into a&#160;<em><span
			style="font-size: 10.0pt; line-height: 13.0pt;">collapsible&#160;</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>

Índice

outline	true
style	none
exclude	.*ndice

Formulario Móvil

En el Fluig, es posible mover solicitudes workflow, a partir de aplicaciones móviles. Debido a eso, al guardar un formulario en el Fluig, automáticamente se genera el formulario móvil, de acuerdo con el mapeo de los campos del formulario del proceso.

A pesar de que el Fluig dispone de la generación automática, existen diversas particularidades para el desarrollo y personalización del formulario Móvil, estas se tratarán en el transcurso de esta guía.

Recomendaciones para Procesos con el Formulario Móvil

...

Formulario Responsivo: Hoy en el mercado existen variados tamaños de pantallas y resoluciones, por eso cualquier formulario desarrollado para Móvil debe ser responsivo, es decir, se debe ajustar a cualquier tamaño de pantalla.

...

Estética: La apariencia visual y design del html deben ser atractivos para los usuarios, conseguimos eso a través de CSS o jQueryMobile que se explicará en las próximas sesiones.

...

Usabilidad: El formulario debe ser fácil de usar, conteniendo apenas los campos importantes para tareas o procesos.

...

Área de clic: Los elementos del HTML deben estar bien posicionados de tal manera que facilite el área de clic, pues hoy existen dispositivos en que las pantallas son muy pequeñas. Sigue un ejemplo:

Image Removed

...

Posicionamiento de las acciones: Las acciones más importantes deben estar posicionadas donde el usuario consigue alcanzar fácilmente, conforme a la figura:

Image Removed

...

text
textArea
radio
select
ComboBox
checkbox.

Beneficios

¿Por qué debo usar el Formulario Móvil?

...

Creando un Formulario Móvil

En el Fluig es posible crear definiciones de formularios de diferentes maneras, utilizando el Fluig Studio, a través del modelado de procesos workflow o a través de upload de formulario en la navegación de documentos.

Siga a continuación, moviéndose por las pestañas a seguir, las formas de creación de formularios:

...

effectDuration	0.5
id	install-windows
history	false
effectType	fade

...

default	true
id	1
label	Fluig Studio
title	Selecione a linguagem

Fluig Studio

Para incluir un nuevo formulario con soporte a dispositivos móviles, realice el procedimiento estándar para exportación de formulario y seleccione los campos que compondrán el formulario móvil en la pantalla antes de la conclusión de la exportación.

Después de la exportación se incluirá otro archivo HTML marcado como "móvil" en la carpeta forms del proyecto Fluig.

Vea en la imagen a seguir la pantalla de selección móvil en la exportación de un formulario:

Image Removed

Figura 15 - Formulario móvil.

Después de la exportación, el formulario debe quedar conforme a la imagen a seguir:

Image Removed

Informações

title	Nota

El Fluig identifica el formulario Móvil por el nombre, este debe tener el mismo nombre del formulario Web sumado de la palabra "_ecmMobile".

Ejemplo: Creado el formulario web "compras.html", el formulario Móvil, obligatoriamente, se debe nombrar como: "compras_ecmmobile.html".

...

id	2
label	Formulário Mobile em Processos
title	Termo de uso

Configuración de Formulario Móvil en Procesos

Es posible permitir la creación del Formulario Móvil también a través del Generador de Formulario, conforme al paso a seguir:

Paso 1: Crear o editar un proceso existente y activar el ítem Formulario.

Image Removed

Paso 2: Seleccionar la carpeta destino donde ese formulario se publicará, también atribuya un título y descripción. Después, haga clic en Crear Formulario.

Image Removed

Paso 3: Incluya los campos y en cada uno de ellos, seleccione si este será también agregado al formulario para dispositivos móviles, haciendo clic en la opciónFormulario Móvil?.

Image Removed

Informações

icon	false
title	Información

No todos los campos mapeados en el formulario del proceso, se pueden mapear para el formulario para dispositivos móviles. Los campos que se pueden mapear exhiben la opción "Formulario Mobile?".

...

id	3
label	Upload via Navegação de Documentos
title	Instalação do fluig

Upload vía Navegación de Documentos

En la upload vía navegación de documentos se realiza como una publicación estándar de formulario, donde el formulario web debe tener un nombre definido y el Formulario Móvil debe ser sumado con el término _ecmmobile.

Image Removed

Informações

title	Nota

El Fluig identifica el formulario Móvil por el nombre, el formulario Móvil debe tener el mismo nombre del formulario Web sumado de la palabra "_ecmMobile".

Ejemplo: Creado el formulario web "compras.html", el formulario Móvil, obligatoriamente, se debe nombrar como: "compras_ecmmobile.html".

Nota

title	Atenção

Las Definiciones de Formularios generadas por los métodos de creacion anteriormente listados, precisan ser editados en el caso que necesite de alguna personalización especial, estos se generan automáticamente conteniendo los ítems básicos para su funcionamiento.

Personalizando de Formulario Móvil

Con la inclusión de formularios que soporten la visualización en dispositivos móviles, es posible mover solicitudes Workflow y realizar el relleno de las informaciones de formularios con mayor movilidad y agilidad.

Como hemos visto, el Formulario Móvil no carga archivos adjuntos, luego, cada personalización se debe realizar dentro del HTML, este posee una serie de particularidades que se tratarán a continuación:

CSS

Al personalizar un Formulario Móvil, el CSS utilizado para parte Web probablemente no se aplica al archivo del dispositivo móvil, por eso se recomienda que el Formulario Móvil use un CSS propio que mantenga el formulario responsivo.

El CSS se debe agregar dentro de la head en el archivo .html Mobile y se debe utilizar la tag:

Bloco de código

language	css

<style type="text/css"> Insira aqui o CSS </style>.

Siga a continuación, moviéndose por las pestañas a seguir, algunos ejemplos de componentes CSS que se pueden aplicar en el formulario Móvil:

...

effectDuration	0.5
id	install-windows
history	false
effectType	fade

...

default	true
id	1
label	Body
title	Selecione a linguagem

Body

Bloco de código

language	css

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;
}

...

id	2
label	Headings
title	Termo de uso

Headings

Bloco de código

language	css

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;
}

...

id	3
label	List
title	Instalação do fluig

List

Bloco de código

language	css

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;
}

...

id	4
label	Label
title	Instalação do fluig

Label

Bloco de código

language	css

.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;
}

...

id	5
label	Input Text
title	Instalação do fluig

Input Text

Bloco de código

language	css

input[type=text] {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

...

id	3
label	TextArea
title	Instalação do fluig

TextArea

Bloco de código

language	css

textarea {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

...

id	3
label	Select
title	Instalação do fluig

Select

Bloco de código

language	css

select {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

Usted debe tratar en el CSS todos los componentes que se utilizarán en su HTML Móvil para que todos tengan el mismo estándar, su HTML Móvil con CSS debe tener esa estructura:

Bloco de código

language	html/xml

<html >
<head>
<title>Formulário de Compras </title>
<style type="text/css">
 <!--Aquí usted debe incluir la estructura del CSS de cada componente-->
</style>
</head>
<body>
</ body >
</html>

Nota

title	Atención

Esta es la estructura básica, dentro de cada tag debe haber elementos y lógicas correspondientes a ellas.

jQuery Mobile

El jQuery Móvil es un framework de interfaz para dispositivos móviles que tiene el objetivo de dar un layout responsivo para las definiciones de formularios. Él facilita mucho en el desarrollo, pues usted no precisa crear un CSS proprio para cada elemento y se puede utilizar en el Fluig Móvil. Es posible seguir ejemplos en el link: http://demos.jquerymobile.com/1.4.2/.

Este se puede incorporar en el HMTL Móvil de forma simple:

Bloco de código

language	html/xml

<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html>

JavaScript

Así como el CSS, el javascript también debe estar dentro del HTML Móvil, luego toda lógica que en la web, normalmente, queda en archivos .js, se debe transferir al Formulario Móvil.

Para mantener una organización dentro del HTML, recomendamos dejar las lógicas al final en el archivo:

Bloco de código

language	html/xml

<html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
 /* Aquí usted debe incluir la lógica javascript */
</script>

Nota

title	Atención.

Para probar el Formulario Móvil, abra el archivo html Móvil en un navegador en el desktop. Si no hay inconsistencias, el formulario probablemente abrirá correctamente también en el Fluig Móvil.

Servicios

Para utilizar servicios internos o externos al Fluig es necesario instanciar, ejecutar y tratar el retorno del servicio vía javascript. Para webservices, recomendamos el uso de jQuery Soap.

A continuación algunas sugerencias:

El uso de servicios internos del Fluig, como por ejemplo Dataset, se deben realizar preferentemente en los eventos de personalización de Formulario y Procesos, de esta manera lo que se personalizará para la web, también se adoptará para móvil, evitando la replicación del código.
Técnicas especiales para el formulario web, como por ejemplo a llamadas de dataset dentro del formulario, no se aplican en el Móvil.

Traducción de Formularios

La traducción de Formulario Móvil se debe realizar siguiendo la guía de Traducción de Formularios . Pero el diferencial, es que será necesario incluir tres nuevos archivos con las literales siguiendo la nomenclatura a continuación:

Portugués: nome_do_formulario_mobile_pt_BR.properties;
Inglés: nome_do_formulario_mobile_en_US.properties;
Español: nome_do_formulario_mobile_es.properties.

Ejemplo: Si el Formulario se llama compras_ecmmobile, entonces los nombres de los archivos .properties serán:

compras_ecmmobile_pt_BR.properties;
compras_ecmmobile_en_US.properties;
compras_ecmmobile_es.properties.

Principal secundario para dispositivos médicos

Los campos que emplean la técnica de principal y secundario no se ingresarán en el formulario generado automáticamente para dispositivos móviles por el Fluig. Pero el producto le permite desarrollar un formulario personalizado para dispositivos móviles consultando estos campos.

Nota
La edición de campos principal y secundario a través de dispositivos móviles no es posible, aun en formularios personalizados. Estos campos son disponibles apenas para consulta.

La consulta a los espacios padre e hijo en dispositivos móviles se realiza a través de funciones javaScript, disponibles dentro del objeto masterList al momento de exhibir el formulario. Son ellas:

getValue

Devuelve una string con el valor de un campo principal y secundario, recibiendo como parámetros el número de secuencia del secundario y el nombre del campo.

Bloco de código

language	javascript

masterList.getValue(sequence,field);

getValues

Devuelve un objeto con todos los valores de los campos principal y secundario, agrupados por el número de secuencia. Este método no posee parámetros.

Bloco de código

language	javascript

masterList.getValues();

getValuesBySequence

Devuelve un objeto con todos los valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuencia.

Bloco de código

language	javascript

masterList.getValuesBySequence(sequence);

getValuesByField

Devuelve todas las secuencias y valores de un determinado campo. Recibe como parámetros el nombre del espacio.

Bloco de código
masterList.getValuesByField(field);

Ingrese adjuntos de la solicitud directamente desde el Formulario

Existe una forma bien simple para guardar adjuntos upload a través de un botón en el formulario. Para eso es necesario ingresar en el evento onclink del button el método showCamera:

Bloco de código

language	xml

<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
 
<script language="javascript">
          
          function showCamera(parameter) {
              JSInterface.showCamera(parameter);
          }
</script>

El parámetro nome_do_anexo es una String y corresponde al nombre del anexo que se guardará en la lista de adjuntos de aquella solicitud.

¿Cómo identificar que estoy usando el Móvil en los eventos?

Con ese recurso es posible aplicar una personalización o/y restricción solamente en el Formulario Móvil, independiente de la Web. Así puedo definir que un proceso o actividad va a recibir un valor diferenciado o que determinada actividad no se puede ejecutar por el Móvil vía personalización.

Existen dos formas de hacer esa personalización:

Eventos del Formulario
Todos los eventos que reciben en el método el form pueden hacer una personalización exclusiva para el Formulario Móvil, son los eventos:

AfterProcessing
AfterSaveNew
BeforeProcessing
DisplayFields
EnableFields
InputFields
ValidadeForm

Para utilizar el evento es necesario hacer la siguiente llamada form.getMobile(), donde retornará un booleano indicando si es un formulario móvil o no. Ejemplo:

Bloco de código

language	javascript

function displayFields(form, customHTML) {
   if ( form.getMobile() != null && form.getMobile()) {
     form.setValue('mtr_usuario', new java.lang.Integer(123456));
   }
}

...

Bloco de código

language	javascript

function beforeStateEntry(sequenceId){
	var isMobile = getValue("WKMobile");
	if (isMobile!=null && isMobile==true){ 
		throw "Ese proceso no puede ser ejecutado por el móvil."; 
	}
}

Ejemplo

Haga el download de los archivos ejemplo aquí.

A continuación un ejemplo de formulario que se mapeó para uso en dispositivos móviles:

Formulário Web

Image Removed

Formulario Móvil

Image Removed

Informações

title	Nota

Como podemos ver, el Formulario Web tiene muchos campos y su mapeo para dispositivos móviles se debe realizar con mucho cuidado.

Los campos Datos de la propuesta se mapearon para Móvil, observen que tiene campos que no existen en el Móvil, pues no se hace necesario en este contexto:

Image Removed

Ítems que están en una tabla se pueden transformar en un collapsible del jQueryMobile.

Al activar el botón '+', el ítem se expande:

...

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Formulario Móvil

Recomendaciones para Procesos con el Formulario Móvil

Beneficios

Creando un Formulario Móvil

Personalizando de Formulario Móvil

CSS

jQuery Mobile

JavaScript

Servicios

Traducción de Formularios

Principal secundario para dispositivos médicos

getValue

getValues

getValuesBySequence

getValuesByField

Ingrese adjuntos de la solicitud directamente desde el Formulario

¿Cómo identificar que estoy usando el Móvil en los eventos?

Ejemplo

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Formulario Móvil

Recomendaciones para Procesos con el Formulario Móvil

Beneficios

Creando un Formulario Móvil

Personalizando de Formulario Móvil

CSS

jQuery Mobile

JavaScript

Servicios

Traducción de Formularios

Principal secundario para dispositivos médicos

getValue

getValues

getValuesBySequence

getValuesByField

Ingrese adjuntos de la solicitud directamente desde el Formulario

¿Cómo identificar que estoy usando el Móvil en los eventos?

Ejemplo