wiki:MolgenisPlugin

Creating a user interface plug-in

MOLGENIS plug-in mechanism allows you to add custom pieces of code to the generated user interface. Here you will create a simple ‘Literature’ plug-in for the AddressBookExample? that shows this years list of publications from Pubmed for each contact.

1. Define the plugin in the 'addressbook_ui.xml'

Edit addressbook_ui.xml to add your plugin to the XML model; note how you can use menu to group the Address next to the new ‘Publications’ plugin.

<?xml version="1.0" encoding="UTF-8"?>
<molgenis name="addressbook">
    <form entity="Contact" name="Contacts">
        <menu name="ContactMenu">
            <form entity="Address" name="Addresses" view="list" />
              <plugin name="Publications" type="plugin.pubmed.PubmedPlugin"/>
        </menu>
    </form>
</molgenis> 

When you now run the generator an "empty" screen plugin class will be generated inside the folder handwritten/java (unless the file allready consists). In this case a class file called plugin.pubmed.!PubmedPlugin. Next to that also a layout template is generated to layout the contents of your plugin in plugin.pubmed.!PubmedPlugin.ftl. This template is generated in the Freemarker template language,  http://freemarker.sourceforge.net

2. Add reload logic to 'plugin.pubmed.PubmedPlugin.java'

Open the plugin.pubmed.PubmedPlugin.java file from the handwritten/java folder. You see it has four methods including:

  • 'handleRequest' to process user requests (updates, interactive features)
  • 'reload' to implement what needs to be done if the page is reloaded (data loading)

Edit the reload function to produce a pubmed query URL

//search parameters
String lastname;

//default searches to this year
String year = "2009";

/* Reload function, gets lastname of currently visible contact */
public void reload(Database db)
{
  //get the menu above this plugin
  MenuModel parentMenu = (MenuModel)this.getParent();

  //get the form above the menu, this holds the contacts
  FormModel<Contact> parentForm = (FormModel)parentMenu.getParent();

  //get the currently visible contact
  List<Contact> visibleContacts = parentForm.getRecords();

  //copy the lastname as search parameter
  this.lastname= visibleContacts.get(0).getLastname();
}

/* Method to produce the query string for pubmed */
public String getQueryString() {
  String url ="http://www.ncbi.nlm.nih.gov/pubmed?term="+lastname+"[au] ";
  
  //if set, filter on year
  if(year != null) url += year+"[Publication Date]";

  return url;
}

/* Method to get the current year */
public String getYear() {
  return year;
}

3. Create a html layout in plugin.pubmed.PubmedPlugin.ftl to show Pubmed in iframe

Tip:  Install Freemarker Plugin into eclipse in order to make Eclipse show colorful highlighting.

  • Edit the section between 'begin' and 'end':
    <#--begin your plugin-->
    
    <iframe src="${screen.getQueryString()}" 
            width="100%" height="800px">
    <#--end of your plugin-->
    
    

4. Add user input handling to enable users to choose year

  • Further edit the 'plugin.pubmed.PubmedPlugin.ftl' to add inputs to enter 'year' and a 'submit' button.
    NOTICE: within MOLGENIS it has become practice to always use a field named ‘action’ to transfer the users intention. Hence the weird onclick=”__action.value=’setYear’ mechanism.
<#--begin your plugin-->

<input type="submit" value="set year:" onclick="__action.value='setYear'">	
<input name="year" value="${screen.getYear()}">
<iframe src="${screen.getQueryString()}" width="100%" height="800px">

<#--end of your plugin-->
  • Edit the 'plugin.pubmed.PubmedPlugin.java' to handle the requests
    public void handleRequest(Database db, Tuple request)
    {
      if("setYear".equals(request.getAction()))
      {
        if(request.getString("year") != null) this.year = request.getString("year");
      }
    }