eXo Platform 4.0 Documentation > Developer Guide > Developing Applications > Developing a gadget > Customizing a gadget

5.3.4.4. Setting preferences

The Google OpenSocial specifications describe different features that can be used, but eXo Platform implements only some of them. This feature and the other gadget features are described in 3 JavaScript files inside the eXoResources/javascript/eXo/gadget folder:

The following is a simple procedure about how to set preferences for Hello World gadget.

  1. Enable the "setprefs" feature by adding <Require feature="setprefs"/> to the <ModulePrefs> tag in the HelloGadget.xml file.

  2. Register one preference for this gadget by adding <UserPref name="welcome" display_name="Welcome message" default_value="Welcome to Hello World gadget!" required="true"/> right after the <ModulePrefs> tag.

  3. Use JavaScript to get the registered preference that changes Welcome message.

    var getUserPrefs = function() {
    var prefs = new _IG_Prefs(__MODULE_ID__);
    var welcome_message = prefs.getString("welcome");
    $(".hello .alert-info h6").text(welcome_message);
    };
    gadgets.util.registerOnLoadHandler(getUserPrefs);
    

In summary, after creating above steps, you will have a complete content in the HelloGadget.xml file as follows:


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs author="eXoPlatform"
               title="Hello World"
               directory_title="Hello World"
               description="The simplest gadget"
               height="300">
    <Require feature="setprefs"/>
  </ModulePrefs>
  <UserPref name="welcome" display_name="Welcome message" default_value="Welcome to Hello World gadget!" required="true"/>

  <Content type="html">
  <![CDATA[     
    <link rel="stylesheet" type="text/css" href="/eXoResources/skin/bootstrap/css/bootstrap.css" />
    <script src="/exo-gadget-resources/script/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
      $("body").live("click", ".hello .btn", function() {
        $(".hello h6").css("color", "green");
      });
      
      var getUserPrefs = function() {
        var prefs = new _IG_Prefs(__MODULE_ID__);
        var welcome_message = prefs.getString("welcome");
        $(".hello .alert-info h6").text(welcome_message);
      };
      gadgets.util.registerOnLoadHandler(getUserPrefs);
    </script>
    <div class='hello well'>
      <h2>Hello</h2>
      <div class='alert alert-info'>
          <h6></h6>
      </div>
      <p>Click <a class='btn btn-primary'>here</a> to change the default color of the welcome message.
      <p><i>Powered by eXo Platform.</i></p>
    </div>
  ]]>
  </Content>
</Module>

Now, the Hello World gadget will appear with a pencil icon that allows changing gadget preferences.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus