Creating
Simple Openbravo Workspace Widgets
Step by Step
Rob Goris
User Experience Architect
Openbravo
November 2010
Spotl...
What is this guide about?
This guide will show you how to create an Openbravo Workspace Widget and fill it
with content by...
This is what we are going to do
(1) Create a module. You only need to create one module that can “store” multiple
widgets....
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 a...
Now create a new Widget
using the QuickCreate
menu
You´re looking at the
bottom half of the form
now
In case you are serio...
Complete the form
In this example we are going
to reuse an existing Google
Gadget called “Section
Summary” that shows
indu...
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 wit...
Now only take the part
following the src between the
“ “ as shown below. This must
be a valid URL
And paste this in the child tab´s
URL field for the widget. Save.
Note: in Chrome there was a problem
with large URLs (iss...
Going back to the Workspace tab
we now find it in the list that
appears when you click the Add
Widget >> link. Press the A...
We now have added some more
widgets: Motion Chart, Team
Calendar and Google Insights.
Ready.
Now let´s share them with the...
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 ad...
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 ...
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
Now you´re all ready to create your own
Some more ideas: http://openbravouxlab.blogspot.com/2010/12/24-ideas-for-
openbrav...
Appendix I
URLs of widgets to copy & paste
URL for Section Summary widget (to copy & paste)
http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&amp;exp_track_js=1&am...
URL for Google Insights widget (to copy & paste)
http://www.ig.gmodules.com/gadgets/ifr?exp_rpc_js=1&amp;exp_track_js=1&am...
URL for Motion Chart widget (to copy & paste)
http://oj0ijfii34kccq3ioto7mdspc7r2s7o9.ig.ig.gmodules.com/gadgets/ifr?exp_r...
URL for Google Docs widget (to copy & paste)
https://docs.google.com/API/IGoogle?up_numDocuments=5&amp;up_viewPreference=o...
How to create the URL for the Google Calendar widget
Go to https://www.google.com/calendar/embedhelper
Log in to your Goog...
Appendix II
Registering, 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......
Upcoming SlideShare
Loading in …5
×

Creating Openbravo Workspace Widgets

47,896 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
47,896
On SlideShare
0
From Embeds
0
Number of Embeds
27,809
Actions
Shares
0
Downloads
101
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Creating Openbravo Workspace Widgets

  1. 1. Creating Simple Openbravo Workspace Widgets Step by Step Rob Goris User Experience Architect Openbravo November 2010 Spotlight on Openbravo 3.0
  2. 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. 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. 4. Be logged in as System Admin Use QuickCreate menu to start creating a new module
  5. 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. 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. 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. 8. A little detour to iGoogle. Here you want to reuse the source for the Google Gadget you like...
  9. 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. 10. Now only take the part following the src between the “ “ as shown below. This must be a valid URL
  11. 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. 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. 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. 14. Click Admin MyOBs>>, choose System and press Edit...
  15. 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. 16. Add the widgets you want to share and when you are done, press the Publish button...
  17. 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. 18. Let´s check this. Change the role to e.g. Sales
  19. 19. Et voila. The widgets you choose are now added to everybody´s workspaces.
  20. 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. 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. 22. Appendix I URLs of widgets to copy & paste
  23. 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. 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. 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. 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. 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. 28. Appendix II Registering, create and publish widgets as modules
  29. 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

×