creating openbravo workspace widgets
Post on 21-Sep-2014
66 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
Creating Simple Openbravo Workspace Widgets
Step by Step
Rob GorisUser Experience Architect
OpenbravoNovember 2010
Spotlight on Openbravo 3.0
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
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
Be logged in as System
Admin
Use QuickCreate menu to start creating a new
module
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).
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.
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
A little detour to iGoogle. Here you want to reuse the
source for the Google Gadget you like...
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!
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
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)
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
We now have added some more widgets: Motion Chart, Team Calendar and Google Insights.
Ready. Now let´s share them with the
team...
Click Admin MyOBs>>, choose System and press Edit...
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...
Add the widgets you want to share and when you are done,
press the Publish button...
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.
Let´s check this. Change the role to e.g. Sales
Et voila. The widgets you choose are now added to everybody´s
workspaces.
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
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
Appendix IURLs of widgets to copy & paste
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=,
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
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
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
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
Appendix IIRegistering, create and publish widgets as modules
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