This guide will show you how to create a simple Openbravo Workspace Widget and fill it with content by pointing to a URL.

1. Creating
Simple Openbravo Workspace Widgets
Step by Step
Rob Goris
User Experience Architect
Openbravo
November 2010
Spotlight on Openbravo 3.0

2. 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 start
Make sure you have done the following
Run 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

3. 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

4. Be logged in
as System
Admin
Use QuickCreate menu
to start creating a new
module

5. 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).

6. 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.

7. 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.URLWidgetP
rovider
Check this one to let
all users enjoy the
widget
Set a height

8. A little detour to iGoogle.
Here you want to reuse the
source for the Google Gadget
you like...

9. 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!

10. Now only take the part
following the src between the
“ “ as shown below. This must
be a valid URL

11. 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)

12. 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

13. We now have added some more
widgets: Motion Chart, Team
Calendar and Google Insights.
Ready.
Now let´s share them with the
team...

14. Click Admin MyOBs>>, choose
System and press Edit...

15. 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...

16. Add the widgets you want to
share and when you are done,
press the Publish button...

17. 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.

18. Let´s check this. Change the role
to e.g. Sales

19. Et voila. The widgets you choose
are now added to everybody´s
workspaces.

20. This user now has deleted the boring
widgets, added some others and
reshuffled the lot.
All set for a great day at work! :P

21. 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

22. Appendix I
URLs of widgets to copy & paste

23. URL for Section Summary widget (to copy & paste)
http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&amp;exp_track_js=1&amp;url=http
%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Ffinance%2Ffinance_sectorsummary2.x
ml&amp;container=ig&amp;view=default&amp;lang=en&amp;country=US&amp;v=e8c095b
c03301f02&amp;parent=http://www.google.com&amp;libs=core:core.io:core.iglegacy:auth-
refresh&amp;is_signedin=1&amp;synd=ig&amp;view=default#st=c%3Dig%26e%3DAPu7icpb
7xTgjKdvNXJfxj0IMJDCA0zeOY1bBhxws1JqJBx0y9/G1PFVB2U1at0JIwe7tVTmLo3LRTil5iMTK0
wGsv9fiQ54/rJzRHfXevN3iuQQ5FqrlRuN5iSE8KIMLoq/Mdl8TLHw&amp;gadgetId=111621084
476111923813&amp;gadgetOwner=105787549640705078752&amp;gadgetViewer=105787
549640705078752&amp;rpctoken=-160603703&amp;ifpctok=-
160603703&amp;up_contracted=,

24. URL for Google Insights widget (to copy & paste)
http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&amp;exp_track_js=1&amp;url=http
%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgoogle_insightsforsearch_relatedsearch
es.xml&amp;container=ig&amp;view=default&amp;lang=en&amp;country=US&amp;v=db15
c13705c51f71&amp;parent=http://www.google.com&amp;libs=core:core.io:core.iglegacy:au
th-
refresh&amp;is_signedin=1&amp;synd=ig&amp;view=default#st=c%3Dig%26e%3DAPu7icqY
JZpX7/hKNLAlzjWsxByDwyuNglAkrW40kQX46nTTnRXfaXBzZActaN80RH7tc2odaoy6o6u5Ukq
SeasOsb1hci5gKldUillri%252BVllCCXT2RMJCDtJb3CZ6G6eZaku%252B0TL%252BlL&amp;gadg
etId=111149605494020903560&amp;gadgetOwner=105787549640705078752&amp;gadget
Viewer=105787549640705078752&amp;rpctoken=-670142023&amp;ifpctok=-
670142023&amp;up__location=empty&amp;up__max_results=10&amp;up__property=emp
ty&amp;up__results_type=RISING&amp;up__time_range=7-
d&amp;up__search_term=&amp;up__category=0

25. URL for Motion Chart widget (to copy & paste)
http://oj0ijfii34kccq3ioto7mdspc7r2s7o9.ig.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&amp;exp_track_js=1&amp;url=http
%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fmotionchart.xml&amp;container=ig&amp;view=default&amp;lang=en
&amp;country=US&amp;v=eb295ba2827b4b82&amp;parent=http://www.google.com&amp;libs=core:core.io:core.iglegacy
:auth-
refresh&amp;is_signedin=1&amp;synd=ig&amp;view=default#st=c%3Dig%26e%3DAPu7icrGCN0jrpKEpHVFALEBaoIesiFVp9
7nmTmWA8jixhSXupkbrNf8e%252Bqm56eYZPkRfW3LhvMSn6eVgF8SLMno8bVMacfitrbV9%252BqW8dRnRCKcI/7DNQQ%2
52Bww66AWz4enbDcz1ipHnH&amp;gadgetId=117646361720875919704&amp;gadgetOwner=105787549640705078752&
amp;gadgetViewer=105787549640705078752&amp;rpctoken=-677474934&amp;ifpctok=-
677474934&amp;up_initialstate=&amp;up_state=%257B%2522xZoomedIn%2522%253Afalse%252C%2522orderedByX%25
22%253Afalse%252C%2522xZoomedDataMax%2522%253A60000%252C%2522sizeOption%2522%253A%25224%2522%25
2C%2522dimensions%2522%253A%257B%2522iconDimensions%2522%253A%255B%2522dim0%2522%255D%257D%252
C%2522xZoomedDataMin%2522%253A5000%252C%2522yZoomedDataMin%2522%253A3%252C%2522yZoomedIn%2522
%253Afalse%252C%2522yLambda%2522%253A1%252C%2522colorOption%2522%253A%2522_UNIQUE_COLOR%2522%2
52C%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%253
A%25222%2522%252C%2522showTrails%2522%253Atrue%252C%2522iconType%2522%253A%2522BUBBLE%2522%252C
%2522yZoomedDataMax%2522%253A10%252C%2522iconKeySettings%2522%253A%255B%255D%252C%2522playDuratio
n%2522%253A6.75%252C%2522orderedByY%2522%253Afalse%252C%2522time%2522%253A%25222001%2522%252C%2
522yAxisOption%2522%253A%25223%2522%252C%2522nonSelectedAlpha%2522%253A0.4%257D&amp;up__table_quer
y_url=http://spreadsheets.google.com/ccc%3Fkey%3Dra6s2uZY0Glui6gLseGGl4w%26hl%3Den_GB&amp;up_title=&amp;up
__table_query_refresh_interval=300

26. URL for Google Docs widget (to copy & paste)
https://docs.google.com/API/IGoogle?up_numDocuments=5&amp;up_viewPreference=ope
ned_by_me&amp;lang=en&amp;country=us&amp;.lang=en&amp;.country=us&amp;synd=ig
&amp;mid=130&amp;ifpctok=-
4110339548844836371&amp;exp_rpc_js=1&amp;exp_track_js=1&amp;exp_ids=17259&am
p;parent=http://www.google.com&amp;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&amp;view=home&amp;is_signedin=1

27. How to create the URL for the Google Calendar widget
Go to https://www.google.com/calendar/embedhelper
Log in to your Google Account (if you had not already)
Pick the calendar you want to display and choose the settings
Copy the part of the code between “ and the > as show below and paste it in the URL field on the Widget>URL tab

28. Appendix II
Registering, create and publish widgets as modules

29. 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 module
In 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 module
http://wiki.openbravo.com/wiki/ERP/2.50/Developers_Guide/How_To_Create_and_Package_a_Module
3) Publishing modules
http://wiki.openbravo.com/wiki/ERP/2.50/Developers_Guide/Concepts/Publishing_Modules