Element List Item Renderer

This allows plugins to adjust how list items are displayed in search results, Element Inspector, or anywhere else the Element List Component is used.

Tutorial

Web Plugin

Register the resources needed.

app.registerJavaScript("/org/visallo/examples/entity_listitemrenderer/plugin.js", true);
app.registerJavaScript("/org/visallo/examples/entity_listitemrenderer/component.js", false);
app.registerJavaScriptTemplate("/org/visallo/examples/entity_listitemrenderer/template.hbs");
app.registerResourceBundle("/org/visallo/examples/entity_listitemrenderer/messages.properties");
app.registerLess("/org/visallo/examples/entity_listitemrenderer/style.less");

Register Extension

Now, register the item renderer. It will only override when the usageContext is searchresults. Some contexts send different input as the item parameter, so its recommended to accept specific contexts, rather than support all contexts.

visallo.registry.registerExtension('org.visallo.entity.listItemRenderer', {
    canHandle: function(element, usageContext) {
        return usageContext === 'searchresults';
    },
    componentPath: 'org/visallo/examples/entity_listitemrenderer/component'
});

Create the Component

Create a Flight component that will render each row.

define([
    'public/v1/api',
    'hbs!./template'
], function(
    api,
    template) {

    return api.defineComponent(ListItemExample);

    function ListItemExample() {

        // 5 lines hidden…

        this.after('initialize', function() {
            var $node = this.$node;
            var item = this.attr.item;
            var usageContext = this.attr.usageContext;

            // 13 lines hidden…
        });

        // 13 lines hidden…
    }
});

Render the template using the item, and formatters.vertex.title to get the title.

.html(template({
    item: item,
    usageContext: usageContext,
    title: connected.formatters.vertex.title(item)
}));

Remember to set the vertexId (or edgeId) in data of the element, for selection to work correctly.

$node.data('vertexId', item.id);

To display an image in the row, wait for the loadPreview event that notifies the component that it has scrolled into view. As this event might be called many times, we ensure onLoadPreview is only ever called once using underscore.js _.once.

this.on('loadPreview', _.once(this.onLoadPreview.bind(this)));

The image path returned from formatters.vertex.image function might be the concept icon, check if it is using formatters.vertex.imageIsFromConcept is so we can style it differently.

this.onLoadPreview = function(event) {
    var self = this,
        item = this.attr.item;

    api.connect().then(function(c) {
        var url = c.formatters.vertex.image(item, null, 80, 80);
        var imageIsFromConcept = c.formatters.vertex.imageIsFromConcept(item);

        self.select('imgSelector')
            .toggleClass('icon', imageIsFromConcept)
            .css('background-image', 'url(' + url + ')');
    })
};

Custom CSS

To customize styling, add a class to the node.

.addClass('example-renderer')

.element-list ul li a.example-renderer {
    // 5 lines hidden…

    .img {
        @size: 40px;
        flex: 0 0 auto;
        width: @size;
        height: @size;
        // 5 lines hidden…

        &.icon {
            // 4 lines hidden…
        }
    }
    .title {
        flex: 1 1 auto;
    }
}

When the row is selected the list element will have an active class. Certain elements may need to adjust to be visible with the blue selection background. The example changes the image border color:

.element-list ul li.active a.example-renderer {
    .img {
        border-color: #096d9e;
    }
}

results matching ""

    No results matching ""