The easiest way to add a scrollbar to your Lumira visualization extension

[niklas_schoenberger]

There are many cases of Lumira visualizations where a scrollbar would be a big plus - especially when you want to visualize big data sets but you don't want your graph to be squashed.
Therefore, some developers already came up with the idea of using the foreignObject element to embed a DIV-container into the content svg which then enables you to activate scrollbars by using the "overflow: auto;" css property.

Basically, this approach works, but there are many problems regarding the foreignObject element.
A really big issue with using the foreignObject is that the scrollbars indeed appear and that they work when using your touch pad or mouse wheel, but at least in the current version of Lumira they are not clickable / draggable.

Another disadvantage of the foreingObject is that not all browsers support it. While this is not a problem when using the extensions inside Lumira, which is using the embedded chromium browser, it might become a problem when the extensions are being used in SAP BusinessObjects Design Studio and the user accesses it, for example, with an old version of Internet Explorer.

For these reasons I want to show you a slightly different and, in my opinion, easier way to implement a scrollbar in your Lumira extension.

Step 1: Use the DIV-Extension template instead of SVG

In order to use a scrollable DIV in your extensions without using a foreignObject element, we have to change the extension type from SVG to DIV (if it's not already a DIV extension). As a result, the main container which is provided inside the render-function will be a normal div instead of an svg.

Now you might be a bit confused because you want to use d3.js and SVG-graphics in your extension, but how would you do that without an SVG-container? Well, don't be afraid. Step two fixes that problem. Let's just take a look at how to change your extension type:

If you are creating a new extension project, just select "Technique: Using DIV" for the PlotArea setting in the Quick Layout Configuration step.



If you are modifying an existing extension, open flow.js and change the property "type" of the flow object to "DIV":



Be aware that your "container"-object provided inside your render-function now is a DIV container instead of an SVG container which means that you cannot directly append SVG-elements to it!

Step 2: Append a DIV and an SVG to the main container

Now that we have changed the type of our container to DIV, we can directly append a scrollable DIV to it and then append an SVG container as a child:



Go to render.js. At the beginning of your render function, first remove all content from the container to make sure that on rerendering no duplicate content is created.

Now you can append the scrollable DIV to the container and set its width and height to the container width and height by setting the corresponding css properties to make sure that it fills the whole container and you don't waste space.

Apply a specific css class to the div so you can individually set the scrollbar behavior in your css in Step 3.

Now you have to find out how much space you need for your visualization as you have to set the width and height of the SVG container. An example would be a horizontal bar chart where each bar needs 40px so the height of your SVG container should at least be the number of bars to be displayed multiplied by 40.

Append an SVG container with the calculated width and height to the scrollable div.
Now you can proceed like in any other extension by just adding all content to the previously created SVG container instead of adding it to the main container.



Step 3: Set the CSS properties to enable the scrollbars

In order the activate the scrollbars for your DIV container, you have to set the overflow css properties. You can either activate horizontal and vertical scrollbars separately or both scrollbars.