Index
Índice |
---|
outline | true |
---|
exclude | .*ndice |
---|
style | none |
---|
|
About widgets
Widgets are screen components that offer specific features on the home page or to create new pages for tracking tasks, processes or documents, among others. The organization of each widget on the pages is customizable via page editing.
Informações |
---|
|
Os Widgets can display content related to the site created from WCM, ERP components or promote integration with third-party systems. |
Default widgets
Fluig has several default widgets that a user can use to compose a page. The table below presents some available widgets:
Custom widgets
Customwidgets are created by the user themself by means of code templates. Through them, the user can provide personalized content, render components of ERP or other third-party systems. It is possible to cite as an example of a custom widget, the widget of sales orders summary, which seeks information in ERP and presents a totalizer for the users:
Image Added
Informações |
---|
|
For more information about how to create custom widgets, go to the Building WCM components in Fluig Studio guide. |
Use widgets
View how to use widgets on a page. Access the tabs to follow the step by step:
Deck of Cards |
---|
effectDuration | 0.5 |
---|
history | false |
---|
id | samples |
---|
effectType | fade |
---|
|
Card |
---|
default | true |
---|
id | 1 |
---|
label | Step 1 |
---|
|
To access the edit mode of a page, open it in the left side menu and click Settings, which is located in the top right corner, and then on Edit page.
Image Added
|
Card |
---|
|
Image Added |
Card |
---|
|
You can add more than one widget to a slot, to add a new widget in the page, click and browse for the widget you want. Later, simply access the Add button and Close. Image Added
|
Card |
---|
|
Edit the widget as you wish. In this example the Content Editor widget was added. Remember that you can move widgets between slots, in this example, we moved the Favorite documents widget to Slot A.
Image Added
|
Card |
---|
|
After you add and configure the widgets, you need to post the page so that the components that were configured can be viewed. To do this, on the Settings menu, click Post page.
Image Added
|
Card |
---|
|
The page is displayed. Image Added
|
|
Widget configuration
Some widgets require configuration for correct functioning. This configuration is done via the Edit feature present in the widget actions menu. Examples: Widgets Content editor,Lists and WEB address, among others. Below are the settings of the Widget WEB address for editing:
Image Added
Another way to configure widgets is via the page editing screen, on which all the widgets added on the page are placed in edit mode.
Deck of Cards |
---|
effectDuration | 0.5 |
---|
history | false |
---|
id | samples |
---|
effectType | fade |
---|
|
Card |
---|
default | true |
---|
id | 1 |
---|
label | Step 1 |
---|
|
|
Card |
---|
|
For the Widget WEB address enter a title, URL, and enter height and width of the widget. After finished, click Save. Image Added
|
|
HTML |
---|
<div id="main-content" class="wiki-content group">
<h1 id="Widgets-Índice">Index</h1><p><style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695845570 {padding: 0px;}
div.rbtoc1412695845570 ul {list-style: none;margin-left: 0px;}
div.rbtoc1412695845570 li {margin-left: 0px;padding-left: 0px;}
/*]]>*/</style><div class='toc-macro rbtoc1412695845570'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a href='#Widgets-SobreWidgets'>About widgets</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1.1</span> <a href='#Widgets-WidgetsPadrão'>Default widgets</a></li>
<li><span class='TOCOutline'>1.2</span> <a href='#Widgets-WidgetsCustomizados'>Custom widgets</a></li>
<li><span class='TOCOutline'>1.3</span> <a href='#Widgets-UtilizarWidgets'>Use widgets</a></li>
<li><span class='TOCOutline'>1.4</span> <a href='#Widgets-ConfiguraçãodeWidgets'>Widget configuration</a></li>
</ul>
</li>
</ul>
</div></p><h1 id="Widgets-SobreWidgets">About widgets</h1><p><em><strong>Widgets</strong></em> are screen components that offer specific features on the home page or to create new pages for tracking tasks, processes or documents, among others. The organization of each <em><strong>widget</strong></em> on the pages is customizable via page editing.</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><em><strong>Widgets</strong></em> can display content related to the site created from WCM, ERP components or promote integration with third-party systems.</p>
</div>
</div>
<p> </p><h2 id="Widgets-WidgetsPadrão">Default widgets</h2><p>Fluig has several default widgets that a user can use to compose a page. The table below presents some available widgets:</p><p> </p><div class="table-wrap"><table class="confluenceTable"><tbody><tr><td rowspan="2" class="confluenceTd"><strong><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095622.png" data-image-src="attachments/142813325/147095622.png"></strong></td><td class="confluenceTd"><strong>Favorite documents</strong></td></tr><tr><td class="confluenceTd"><span>Have easy access to the documents you use the most on a daily basis.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095624.png" data-image-src="attachments/142813325/147095624.png"></td><td class="confluenceTd"><strong>Popular documents</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>See what the most accessed documents are.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095625.png" data-image-src="attachments/142813325/147095625.png"></td><td colspan="1" class="confluenceTd"><strong>Favorite processes</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Start new requests of the processes that you use the most.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095626.png" data-image-src="attachments/142813325/147095626.png"></td><td colspan="1" class="confluenceTd"><strong>Notification wall</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Display notifications on pages.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095627.png" data-image-src="attachments/142813325/147095627.png"></td><td colspan="1" class="confluenceTd"><strong>Task charts</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Visually, see how your pending issues are.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095628.png" data-image-src="attachments/142813325/147095628.png"></td><td colspan="1" class="confluenceTd"><strong>Community details</strong></td></tr><tr><td colspan="1" class="confluenceTd">View information about a community.</td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095631.png" data-image-src="attachments/142813325/147095631.png"></td><td colspan="1" class="confluenceTd"><strong>New post</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Create posts in communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095641.png" data-image-src="attachments/142813325/147095641.png"></td><td colspan="1" class="confluenceTd"><strong>Social Information</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View your contacts and communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095642.png" data-image-src="attachments/142813325/147095642.png"></td><td colspan="1" class="confluenceTd"><strong>Timeline</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Follow up the posts of a community.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095643.png" data-image-src="attachments/142813325/147095643.png"></td><td colspan="1" class="confluenceTd"><strong>Community list</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>See the available communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095618.png" data-image-src="attachments/142813325/147095618.png"></td><td colspan="1" class="confluenceTd"><strong>Graph viewer</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View graphs quickly and easily.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095645.png" data-image-src="attachments/142813325/147095645.png"></td><td colspan="1" class="confluenceTd"><strong>WEB Address</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Visit WEB addresses in an easy and quick way.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095646.png" data-image-src="attachments/142813325/147095646.png"></td><td colspan="1" class="confluenceTd"><strong>Content Editor</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Create rich content for your page.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095648.png" data-image-src="attachments/142813325/147095648.png"></td><td colspan="1" class="confluenceTd"><strong>Mini launchpad</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have quick access to a Fluig Identity app.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095649.png" data-image-src="attachments/142813325/147095649.png"></td><td colspan="1" class="confluenceTd"><strong>Lists</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View lists on your pages or communities.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095650.png" data-image-src="attachments/142813325/147095650.png"></td><td colspan="1" class="confluenceTd"><strong>Pending tasks</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View your pending issues summarized through a graph.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095651.png" data-image-src="attachments/142813325/147095651.png"></td><td colspan="1" class="confluenceTd"><strong>Social favorites</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have easy access to contacts and communities that you use the most on a daily basis.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095652.png" data-image-src="attachments/142813325/147095652.png"></td><td colspan="1" class="confluenceTd"><strong>Community browsing</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Browse community galleries.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095653.png" data-image-src="attachments/142813325/147095653.png"></td><td colspan="1" class="confluenceTd"><strong>Centralized Access</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have easy access to routines of systems integrated to Fluig.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095654.png" data-image-src="attachments/142813325/147095654.png"></td><td colspan="1" class="confluenceTd"><strong>Analytics</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>View graphs and </span><em>Dashboards</em><span> of </span><em>Analytics</em><span> quickly and easily.</span></td></tr><tr><td rowspan="2" class="confluenceTd"><img class="confluence-embedded-image confluence-thumbnail" width="40" src="attachments/142813325/147095655.png" data-image-src="attachments/142813325/147095655.png"></td><td colspan="1" class="confluenceTd"><strong>Quick query</strong></td></tr><tr><td colspan="1" class="confluenceTd"><span>Have quick access to simplified reports.</span></td></tr></tbody></table></div><p> </p><p> </p><h2 id="Widgets-WidgetsCustomizados">Custom widgets</h2><p><strong>Custom<em>widgets</em></strong> are created by the user themself by means of code <em>templates</em>. Through them, the user can provide personalized content, render components of <em>ERP </em>or other third-party systems. <span>It is possible to cite as an example of a </span><strong><em>custom </em>widget</strong><span>, the </span><strong><em>widget</em> of sales orders summary</strong><span>, which seeks information in </span><em>ERP</em><span> and presents a totalizer for the users:</span></p><p><img class="confluence-embedded-image image-center" src="attachments/142813325/142936577.jpg" data-image-src="attachments/142813325/142936577.jpg"></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>For more information about how to create custom widgets, go to the <a href="113803693.html">Building WCM components in Fluig Studio</a> guide.</p>
</div>
</div>
<p> </p><h2 id="Widgets-UtilizarWidgets">Use widgets</h2><p>View how to use <strong><em>widgets</em></strong> on a page. Access the tabs to follow the step by step:</p><p> </p>
<a name="composition-deck-samples"></a>
<div id="samples"
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="Passo1"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p><span>To access the edit mode of a page, open it in the left side menu and click </span><strong>Settings</strong><span>, which is located in the top right corner, and then on </span><strong>Edit page.</strong></p></li></ul><p><strong><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119582.png" data-image-src="attachments/142813325/146119582.png"></strong></p><p><strong><br /></strong></p></div>
<div id="2"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 2"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><div><ul><li><p><span>In the edit mode of a page, you can add </span><strong><em>widgets</em></strong><span> to the </span><strong><em>slots.</em></strong><span> Note that in each example page slot, there is already a widget added</span><span>. </span></p><p><span><br /></span></p></li></ul></div><div><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119586.png" data-image-src="attachments/142813325/146119586.png"></div></div>
<div id="3"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 3"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p><span><span>You can add more than one widget to a slot, </span> to add a new </span><strong><em>widget</em></strong><span> in the page, click <img class="confluence-embedded-image" src="attachments/142813325/146119587.png" data-image-src="attachments/142813325/146119587.png">and browse for the widget you want</span><span>. Later, simply access the <strong>Add </strong> button and<strong> Close</strong>.</span></p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119593.png" data-image-src="attachments/142813325/146119593.png"></p></li></ul><p> </p></div>
<div id="4"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 4"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>The <strong><em>widget</em></strong> is added to the page. </p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119594.png" data-image-src="attachments/142813325/146119594.png"></p></li></ul><p><strong><br /></strong></p></div>
<div id="5"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 5"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>Edit the widget as you wish. In this example the Content Editor widget was added.</p></li><li><p>Remember that you can move <strong>widgets</strong> between <strong>slots</strong>, in this example, we moved the <strong>Favorite documents widget</strong> to <em>Slot A</em>.</p></li></ul><p> </p><p><strong><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119599.png" data-image-src="attachments/142813325/146119599.png"></strong></p><p><strong><br /></strong></p></div>
<div id="6"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 6"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>After you add and configure the <strong><em>widgets</em></strong>, you need to post the page so that the components that were configured can be viewed. To do this, on the <strong>Settings menu</strong>, click <strong>Post page.</strong></p><p> </p><p style="text-align: center;"><img class="confluence-embedded-image" width="500" src="attachments/142813325/146119598.png" data-image-src="attachments/142813325/146119598.png"></p><p><strong><br /></strong></p></li></ul></div>
<div id="7"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 7"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>The page is displayed. </p><p><br /><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119600.png" data-image-src="attachments/142813325/146119600.png"></p></li></ul><p> </p></div>
<p> </p><p> </p></div>
</div> <!-- // .deck -->
<p> </p><h2 id="Widgets-ConfiguraçãodeWidgets">Widget configuration</h2><p>Some <strong><em>widgets</em></strong> require configuration for correct functioning. This configuration is done via the <strong>Edit</strong> feature present in the <strong><em>widget</em></strong> actions menu. Examples: <strong><em>Widgets</em> Content editor</strong>,<strong>Lists</strong> and <strong>WEB address,</strong> among others. Below are the settings of the <strong>Widget WEB address</strong> for editing:</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/146119564.png" data-image-src="attachments/142813325/146119564.png"></p><p style="text-align: center;"> </p><p>Another way to configure <strong><em>widgets</em></strong> is via the page editing screen, on which all the <strong><em>widgets</em></strong> added on the page are placed in edit mode.</p><p> </p>
<a name="composition-deck-samples"></a>
<div id="samples"
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="Passo1"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>To configure <strong><em>widgets</em></strong>, go to the page in which it was added.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095893.png" data-image-src="attachments/142813325/147095893.png"></p></li></ul><p> </p></div>
<div id="2"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 2"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><div><ul><li><p>The <strong><em>widgets</em></strong> that allow settings feature the <strong><em>Gear</em></strong> icon. Click that <strong>icon</strong> and then <strong>Edit.</strong></p><p><img class="confluence-embedded-image image-center" src="attachments/142813325/147095892.png" data-image-src="attachments/142813325/147095892.png"></p><p><strong><br /></strong></p></li></ul></div></div>
<div id="3"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 3"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>The edit mode of the <strong><em>widget</em></strong> is open.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095895.png" data-image-src="attachments/142813325/147095895.png"></p></li></ul><p> </p></div>
<div id="4"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 4"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>For the <strong><em>Widget</em> WEB address</strong> enter a title, URL, and enter height and width of the <em>widget</em>. After finished, click <strong>Save</strong>.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095894.png" data-image-src="attachments/142813325/147095894.png"></p></li></ul><p> </p></div>
<div id="5"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 5"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>After you save it, you will receive a message saying that <strong><em>the preferences have been successfully saved </em></strong>. Click <strong>OK</strong>, and then go to the page again.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095897.png" data-image-src="attachments/142813325/147095897.png"></p></li></ul><p> </p></div>
<div id="6"
class="deck-card "
style=""
cssclass=""
accesskey=""
label="Passo 6"
title=""
nextafter="0"
effecttype="default"
effectduration="-1.0"><p> </p><ul><li><p>Note that now the <strong><em>widget</em></strong> has a new content.</p><p><img class="confluence-embedded-image image-center" width="500" src="attachments/142813325/147095898.png" data-image-src="attachments/142813325/147095898.png"></p></li></ul><p> </p></div>
<p> </p><p> </p></div>
</div> <!-- // .deck -->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</div>
|