creating openbravo workspace widgets
Post on 21-Sep-2014
67 views
DESCRIPTION
This guide will show you how to create a simple Openbravo Workspace Widget and fill it with content by pointing to a URL.TRANSCRIPT
![Page 1: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/1.jpg)
Creating Simple Openbravo Workspace Widgets
Step by Step
Rob GorisUser Experience Architect
OpenbravoNovember 2010
Spotlight on Openbravo 3.0
![Page 2: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/2.jpg)
What is this guide about?This guide will show you how to create an Openbravo Workspace Widget and fill it with content by pointing to a URL, by e.g. reusing a Google Gadget. Obviously, creating a real cool widget that uses Openbravo data is a bit more difficult but...let
´s first learn the basics.
Before you startMake sure you have done the followingRun Openbravo 3.0 – RC3 (or higher). See release notes [1] on how to download and install this distribution.Run Firefox. I just noticed that Chrome does not like super-long URLs in the text field for the widget (issue logged [2]). IE and Safari should be okay.Be logged on as System Administrator.
[1] http://wiki.openbravo.com/wiki/ERP/3.0/Release_Notes/3.0RC3[2] https://issues.openbravo.com/view.php?id=15342
![Page 3: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/3.jpg)
This is what we are going to do(1) Create a module. You only need to create one module that can “store” multiple widgets.(2) Create simple widget(s) by copying and pasting URLs from sites or existing widgets(3) Add the widget(s) to your workspace
![Page 4: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/4.jpg)
Be logged in as System
Admin
Use QuickCreate menu to start creating a new
module
![Page 5: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/5.jpg)
Complete New Module form and save it
“In Development”
must be checked
Version must be format X.Y.Z
Something unique such as com.yourdomain.lastname.firstname
(most common is to use your domain the other way round).
![Page 6: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/6.jpg)
Now create a new Widget using the QuickCreate
menu
You´re looking at the bottom half of the form
now
In case you are serious about things and want to register your module (to share or sell the widget maybe), you can register its module. You will use
your Forge credentials to register the module in the Central Repository. Let´s not do that for now. See Appendix
II for more info.
![Page 7: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/7.jpg)
Complete the form
In this example we are going to reuse an existing Google
Gadget called “Section Summary” that shows industry sector trends
Copy and paste this from the other widgets or type it here without making
mistakes
org.openbravo.client.myob.URLWidgetProvider
Check this one to let all users enjoy the
widget
Set a height
![Page 8: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/8.jpg)
A little detour to iGoogle. Here you want to reuse the
source for the Google Gadget you like...
![Page 9: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/9.jpg)
Using Firefox (and e.g. the Firebug extension) find the code for the specific widget that starts with <iframe and ends with “>.
Now paste it in an editor...
That´s the one we want!
![Page 10: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/10.jpg)
Now only take the part following the src between the “ “ as shown below. This must
be a valid URL
FInd this URL on the last s
lides so
you can copy & paste it
![Page 11: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/11.jpg)
And paste this in the child tab´s URL field for the widget. Save.
Note: in Chrome there was a problem with large URLs (issue logged)
![Page 12: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/12.jpg)
Going back to the Workspace tab we now find it in the list that
appears when you click the Add Widget >> link. Press the Add
button.
And here it appears
![Page 13: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/13.jpg)
We now have added some more widgets: Motion Chart, Team Calendar and Google Insights.
Ready. Now let´s share them with the
team...
![Page 14: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/14.jpg)
Click Admin MyOBs>>, choose System and press Edit...
![Page 15: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/15.jpg)
This opens a blank workspace which is in fact the workspace of all users you manage. Click the Add Widget link to start adding
some widgets...
![Page 16: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/16.jpg)
Add the widgets you want to share and when you are done,
press the Publish button...
![Page 17: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/17.jpg)
All users in the entity (SYSTEM in our case) now have “received” the widgets you published to
them. They will see them on next login.
![Page 18: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/18.jpg)
Let´s check this. Change the role to e.g. Sales
![Page 19: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/19.jpg)
Et voila. The widgets you choose are now added to everybody´s
workspaces.
![Page 20: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/20.jpg)
This user now has deleted the boring widgets, added some others and
reshuffled the lot. All set for a great day at work! :P
FInd the URLs for th
ese widgets
on the last slides so
you can copy
& paste it
![Page 21: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/21.jpg)
Now you´re all ready to create your own
Some more ideas: http://openbravouxlab.blogspot.com/2010/12/24-ideas-for-openbravo-workspace.html
Share and discuss widgets: http://forge.openbravo.com/plugins/espforum/view.php?group_id=100&forumid=886353&topicid=7021092
On the next pages you find some URLs to copy and paste for your widgets
![Page 22: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/22.jpg)
Appendix IURLs of widgets to copy & paste
![Page 23: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/23.jpg)
URL for Section Summary widget (to copy & paste) http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&exp_track_js=1&url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Ffinance%2Ffinance_sectorsummary2.xml&container=ig&view=default&lang=en&country=US&v=e8c095bc03301f02&parent=http://www.google.com&libs=core:core.io:core.iglegacy:auth-refresh&is_signedin=1&synd=ig&view=default#st=c%3Dig%26e%3DAPu7icpb7xTgjKdvNXJfxj0IMJDCA0zeOY1bBhxws1JqJBx0y9/G1PFVB2U1at0JIwe7tVTmLo3LRTil5iMTK0wGsv9fiQ54/rJzRHfXevN3iuQQ5FqrlRuN5iSE8KIMLoq/Mdl8TLHw&gadgetId=111621084476111923813&gadgetOwner=105787549640705078752&gadgetViewer=105787549640705078752&rpctoken=-160603703&ifpctok=-160603703&up_contracted=,
![Page 24: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/24.jpg)
URL for Google Insights widget (to copy & paste) http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&exp_track_js=1&url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearches.xml&container=ig&view=default&lang=en&country=US&v=db15c13705c51f71&parent=http://www.google.com&libs=core:core.io:core.iglegacy:auth-refresh&is_signedin=1&synd=ig&view=default#st=c%3Dig%26e%3DAPu7icqYJZpX7/hKNLAlzjWsxByDwyuNglAkrW40kQX46nTTnRXfaXBzZActaN80RH7tc2odaoy6o6u5UkqSeasOsb1hci5gKldUillri%252BVllCCXT2RMJCDtJb3CZ6G6eZaku%252B0TL%252BlL&gadgetId=111149605494020903560&gadgetOwner=105787549640705078752&gadgetViewer=105787549640705078752&rpctoken=-670142023&ifpctok=-670142023&up__location=empty&up__max_results=10&up__property=empty&up__results_type=RISING&up__time_range=7-d&up__search_term=&up__category=0
![Page 25: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/25.jpg)
URL for Motion Chart widget (to copy & paste) http://oj0ijfii34kccq3ioto7mdspc7r2s7o9.ig.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&exp_track_js=1&url=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fmotionchart.xml&container=ig&view=default&lang=en&country=US&v=eb295ba2827b4b82&parent=http://www.google.com&libs=core:core.io:core.iglegacy:auth-refresh&is_signedin=1&synd=ig&view=default#st=c%3Dig%26e%3DAPu7icrGCN0jrpKEpHVFALEBaoIesiFVp97nmTmWA8jixhSXupkbrNf8e%252Bqm56eYZPkRfW3LhvMSn6eVgF8SLMno8bVMacfitrbV9%252BqW8dRnRCKcI/7DNQQ%252Bww66AWz4enbDcz1ipHnH&gadgetId=117646361720875919704&gadgetOwner=105787549640705078752&gadgetViewer=105787549640705078752&rpctoken=-677474934&ifpctok=-677474934&up_initialstate=&up_state=%257B%2522xZoomedIn%2522%253Afalse%252C%2522orderedByX%2522%253Afalse%252C%2522xZoomedDataMax%2522%253A60000%252C%2522sizeOption%2522%253A%25224%2522%252C%2522dimensions%2522%253A%257B%2522iconDimensions%2522%253A%255B%2522dim0%2522%255D%257D%252C%2522xZoomedDataMin%2522%253A5000%252C%2522yZoomedDataMin%2522%253A3%252C%2522yZoomedIn%2522%253Afalse%252C%2522yLambda%2522%253A1%252C%2522colorOption%2522%253A%2522_UNIQUE_COLOR%2522%252C%2522duration%2522%253A%257B%2522multiplier%2522%253A1%252C%2522timeUnit%2522%253A%2522Y%2522%257D%252C%2522xLambda%2522%253A1%252C%2522stateVersion%2522%253A3%252C%2522xAxisOption%2522%253A%25222%2522%252C%2522showTrails%2522%253Atrue%252C%2522iconType%2522%253A%2522BUBBLE%2522%252C%2522yZoomedDataMax%2522%253A10%252C%2522iconKeySettings%2522%253A%255B%255D%252C%2522playDuration%2522%253A6.75%252C%2522orderedByY%2522%253Afalse%252C%2522time%2522%253A%25222001%2522%252C%2522yAxisOption%2522%253A%25223%2522%252C%2522nonSelectedAlpha%2522%253A0.4%257D&up__table_query_url=http://spreadsheets.google.com/ccc%3Fkey%3Dra6s2uZY0Glui6gLseGGl4w%26hl%3Den_GB&up_title=&up__table_query_refresh_interval=300
![Page 26: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/26.jpg)
URL for Google Docs widget (to copy & paste) https://docs.google.com/API/IGoogle?up_numDocuments=5&up_viewPreference=opened_by_me&lang=en&country=us&.lang=en&.country=us&synd=ig&mid=130&ifpctok=-4110339548844836371&exp_rpc_js=1&exp_track_js=1&exp_ids=17259&parent=http://www.google.com&libs=7ndonz73vUA/lib/liberror_tracker.js,iHKb-4mKuMY/lib/librpc.js,VKkU-3_4mDA/lib/libcore.js,OqjxSeEKc8o/lib/libdynamic-height.js,a5j4V1JuNVE/lib/libsetprefs.js&view=home&is_signedin=1
![Page 27: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/27.jpg)
How to create the URL for the Google Calendar widget Go to https://www.google.com/calendar/embedhelperLog in to your Google Account (if you had not already)Pick the calendar you want to display and choose the settingsCopy the part of the code between “ and the > as show below and paste it in the URL field on the Widget>URL tab
![Page 28: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/28.jpg)
Appendix IIRegistering, create and publish widgets as modules
![Page 29: Creating Openbravo Workspace Widgets](https://reader034.vdocuments.us/reader034/viewer/2022042507/541e13797bef0ac85a8b473e/html5/thumbnails/29.jpg)
Publishing a Widget as a Module (Advanced Users)So you want to share these awesome widgets with the world? For free or...if they are really really good, even for money?You then need register, create and publish them as a module to the Central Repository
1) Register your moduleIn the Module tab, press the Register Module button at the bottom of the form. You can use your Forge credentials in the registration popup that follows.
2) Create and package a modulehttp://wiki.openbravo.com/wiki/ERP/2.50/Developers_Guide/How_To_Create_and_Package_a_Module
3) Publishing moduleshttp://wiki.openbravo.com/wiki/ERP/2.50/Developers_Guide/Concepts/Publishing_Modules