Make your app compatible with Scroll Viewport

Scroll Viewport tries to preserve most of the content and styling of content created by macros so it looks similar to the Confluence view.

Due to the way Scroll Viewport themes manage web resources there might be some additional steps required though.

Macros

Web Resources

If your macro produces HTML that requires Javascript or CSS provided by a Confluence web resource module, make sure the macro properly requires these resources when rendered. There are two ways to do this:

• If your macro uses a Velocity template simply add the following to it:

  CODE

  #requireResource("<COMPLETE_PLUGIN_MODULE_KEY>")

  
  

• If your macro only has a Java implementation use the com.atlassian.webresource.api.assembler.PageBuilderService: 

  JAVA

  pageBuilderService.assembler().resources().requireWebResource("<COMPLETE_PLUGIN_MODULE_KEY>");

This will make sure the resources are available in viewports if the viewport theme includes these web resources via the $page.resources placeholder. This placeholder is included in all themes bundled with Scroll Viewport. Also see General 3rd party add-on implementation

Output Mode

It is possible for macros to detect that it is currently being rendered within a viewport. You can use this to provide different output if required.

We add the following properties to the macro's ConversionContext. Both key and values are always of type String. 

These properties can be used like this in your macro:

@Override
public String execute(Map<String, String> parameters, String body, ConversionContext context) {
    if ("com.k15t.scroll.scroll-viewport".equals(context.getProperty("com.k15t.scroll.product.key"))) {
        // Output content specific for Scroll Viewport
        return "<table>...</table>";
    } else {
        // Output generic content
        return "<div data-context-id='...'/>";
    }
}

Web Panels

Some apps contain web panels in order to inject custom HTML into the Confluence view. This is often used to provide configuration data to Javascript.

If your app's Javascript requires such web panels you should make sure to provide a web panel in Scroll Viewport's default location k15t.scroll-viewport.viewcontent.

This will ensure it will be rendered in viewports as well. The easiest way to do this is to simply duplicate the web panel module definition in your app's atlassian-plugin.xml:

<web-panel key="myapp-k15t-viewport-config-web-panel" location="k15t.scroll-viewport.viewcontent" ... />

When rendered the web panel context will consist of the same properties we add to the macro context (see section above). It's also possible to inject custom context properties, see the placeholder documentation for further information.