Editing Layout Code for Information Bubbles

The easiest way to customize your information bubbles is to use an existing template, and then map the attributes from your dataset into the "slots" defined in the template. If you don't have any templates yet, you can create your own using standard HTML markup. There are a few special features to this syntax to make working Insight templates.

Here's a very basic example of a template:

<div class="template_block"> {Slot name:text:Click here to configure this slot} </div>

The 'class="template_block"' is important, and it can only be on block-level elements (e.g. div, span). This defines the block as containing variable slots for mapping to dataset attributes. Some prefer to have many slots in a single block and others prefer to have very few slots per block. The latter strategy divides the layout in the "Configure Content" tab more cleanly, but either will work.

The next key part is the definition of a variable slot. Each slot is defined by curly braces "{}" and contains three parts, each separated by a colon.

1. The first part is the label text that will show up next to the form field when you map an attribute to the slot.

2. The second part is the type of data that will be entered here. Note that this can be one of 3 legal values: "text", "long_text", and "image". It is optional (although the colon delimiters must still be there), and if omitted it defaults to "text". Note that "text" is used almost all the time, even if the attribute is a number, date, or enumeration. Using "long_text" will display a textarea form field instead of a standard text field. Using "image" will display the slot as a placeholder image (a box with an "X" in it), which gives you a better preview of the layout in the "Configure Content" tab. Note that only text and image data type attributes are available to map to an "image" slot (text attributes can be used for image URLs).

3. The third part is the label text the will be displayed for the slot itself, prior to clicking on it to map attributes to it. If omitted, this text will show "lorem ipsum" text in its place.

Overall, you have a great deal of flexibility in styling your information bubbles. Some common examples include using your organization logo at the top or bottom of every bubble, matching the color style of your organization's identity, or even mapping multiple attributes into a URL string that can generate a chart on the fly.

For security reasons, some markup tags are not permitted. You should avoid using the <script>, <embed>, <iframe>, and <applet> elements in your HTML.

Once your markup is in, click "Validate & Save" to test it out. Insight will not save if the code does not properly validate, so correct any errors before continuing. Saving this way is just for this visualization. If you want to use your template many times, choose "Save as...". This will give you the option of naming your template, and it will be included in the menu of templates for you in the future. If you are the system administrator, you will also have the option of saving the template as a menu option for all users across the system.