Creating an inline lookup

instead of using the lookup window

I was implementing Xopus for a project and they have a lot of values that need to be looked up from a settings file. They look up values for places, provinces, types of organizations, people in organizations, programs of organizations and so on. On top of that they have the standard lookups for images and links (standard because you can easily copy them from the simple demo).

However Internet Explorer takes a while to think about how to open a new window, where to place it, if it is safe, if whoever opened it was actually authorized to do so, and if the user really really wants new windows to open, and so I figured that for some of these values I could make an inline lookup for those values that didn't have too many different options (otherwise the lookup would become too big).

The values to lookup were attributes defined as a lookup as follows in the Xopus config:

<x:lookup parentPattern="self::region"
name="id" 
url="/cms/lookup/region" 
forceLookup="true" 
autoOpen="true"/>

I had used something like the following to automatically open a new window with the possible values in the XSL (this is 'automatic' because the lookup config says that the value is forced to be looked up and opens automatically):

<button onclick="node.openAttributesEditor();">edit</button>

Now in order to do the same inline I disabled the lookup-configuration for the attribute and enabled subCanvasMode to allow for more control on HTML elements within the editor, and wrote a javascript function which did the following:

get the HTML element representing the lookup
use var xml = HTTPTools.getXML("/inlinelookup/"+type); to get XML for the type of values I wanted to look up.
for each value in the XML create an HTML element that can be clicked and then does something to set the value back on the node which originally fired the event.
add that element to the lookup HTML element

Instead of opening the attributes editor I would now open my own lookup:

<button onclick="lookup('{name()}',node);">edit</button>

The first argument is the name of the current node, representing the type of value to look up. "node" as an argument represents the element in the XML that is the current node in the XSL template that is drawing the above.

The function lookup then looks something like this:

function lookup(type, node)
{
  var parent = document.getElementById('thingsarelookingup');
  
  parent.style.display = 'block';
  
  var xml = HTTPTools.getXML("/inlinelookup/"+type);
  
  var things = xml.documentElement.childNodes;
  for (var i=0; i<things.length; i++) 
  {
    var el = document.createElement("li");
    var value = things[i].text;
    el.attachEvent("onclick",createClickHandler(node, value)); 
    parent.appendChild(el);
  }
}

This uses the function createClickHandler in order to get the scope for the arguments for the onclickhandler right.

function createClickHandler(node, value)
{
  return function(){node.setAttribute('id',value);}
}

In the end the element representing the value will set the "id" attribute to the value . I've omitted some extra styling to show the lookup HTML element at the correct position. This element is written by default into the HTML within the editor in my XSL, but you could also create it on the fly. Also note that opening the lookup a second time will just add the same values, so you could opt to empty the parent first or not go through the whole thing if you can remember which type of values are already showing.

At any rate this is a fairly easy way of circumventing the use of lookups through popup windows. It is important to note however that subCanvasMode really needs to be enabled to make this work properly. You would not be able to hide the lookup HTML element because it would be shown as visible due to it being within the editor which says that the whole HTML thing is contentEditable. Using subCanvasMode can be quite useful if you want to do more fancy things.

Creating an inline lookup

instead of using the lookup window

Comments

Blogposts

Login