Skip to content

Technical

Components

Web components:

Lwc Option Visualizer Table

Tag name: lwc-limepkg-option-visualizer-table

A component used on the field in table view to visualize your options.

Lwc Option Visualizer Card

Tag name: lwc-limepkg-option-visualizer-card

A component used on the field in card view to visualize your options.

Platform service

This plugin registers an option visualizer service on the Lime platform, so that other plugins can present option values with the same icons, colors and texts that the card component uses.

Service name: limepkg-option-visualizer.option-visualizer.service

The service answers one question: given a limetype and a property, what are its options, dressed with the text, icon and disabled flag they should be shown with? It deliberately does not hand out the plugin configuration, nor any shape derived from it, so that the settings can be reshaped without breaking anyone who depends on the service.

Using the service

Both the limetype and the property can be given either as objects or by name, and the property name may be a dot separated path that is resolved across relations.

import { OptionVisualizerServiceName } from '../services/option-visualizer.interface';

const service = this.platform.get(OptionVisualizerServiceName);

// By name, on the limetype that owns the property.
const visualized = service.getOptions({
    limetype: 'company',
    property: 'buyingstatus',
});

// Through a relation. The options, and the settings that present them, are
// resolved on `company`, the limetype that owns `buyingstatus`.
const viaRelation = service.getOptions({
    limetype: 'person',
    property: 'company.buyingstatus',
});

The result carries the resolved limetype and property, whether the property has been set up at all, and the options themselves as Lime Elements options, ready to hand to limel-select and its siblings:

interface VisualizedOptions {
    limetype: LimeType;
    property: LimeProperty;
    isConfigured: boolean;
    options: Array<Option<string>>;
}

Inactive options are included and flagged as disabled. They should still be shown when already set on an object, but never offered for selection, so filter them out where that matters.

Reacting to changes

getOptions is synchronous and never throws. It returns undefined when the limetype or the property cannot be resolved, which includes the time before the platform state has loaded. That is the normal state on a first render, so do not treat one undefined as a final answer. Use subscribe to read again once the settings or the limetypes arrive:

const unsubscribe = service.subscribe(() => this.reload());

The callback is a signal to call getOptions again, nothing more. It carries no arguments, and it is invoked once as soon as it is registered, so subscribing is all you need to do to get your first read — you never have to call getOptions separately to prime a cache. It may fire more than once for a single change, which is harmless as long as your reload is idempotent.

The whole pattern in a component:

@Prop()
public platform: LimeWebComponentPlatform;

@State()
private options: Array<Option<string>> = [];

private service?: OptionVisualizerService;

private unsubscribe?: () => void;

public componentWillLoad(): void {
    this.service = this.platform.get(OptionVisualizerServiceName);

    // Calls `reload` immediately, and again whenever the settings or the
    // limetypes change.
    this.unsubscribe = this.service.subscribe(() => this.reload());
}

public disconnectedCallback(): void {
    this.unsubscribe?.();
    this.unsubscribe = undefined;
}

private reload(): void {
    const visualized = this.service.getOptions({
        limetype: 'person',
        property: 'company.buyingstatus',
    });

    // `undefined` before the platform state has loaded. Keep what you have
    // and wait for the next callback.
    if (!visualized) {
        return;
    }

    this.options = visualized.options;
}

Always call unsubscribe when your component is disconnected.

A property that has not been set up in the option visualizer settings is not an error. Its options are still returned, presented plainly, and isConfigured is false so that you can tell the difference.

Requests are objects

getOptions takes a single request object rather than positional arguments, so that the request can grow later without breaking any consumer.

The service is not available in Lime Admin

The service is registered by the plugin loader, and the loader does not run in Lime Admin. A component that runs there has to create its own instance:

import { OptionVisualizerServiceImplementation } from '../services/option-visualizer.service';

private _optionVisualizer?: OptionVisualizerService;

private get optionVisualizer(): OptionVisualizerService {
    this._optionVisualizer ??= new OptionVisualizerServiceImplementation(
        this.platform
    );

    return this._optionVisualizer;
}

The service holds no state of its own, so a local instance behaves just like the registered one.

Service interface

To use the service from another plugin, copy frontend/src/services/option-visualizer.interface.ts from this repository to frontend/src/services/option-visualizer.interface.ts in your own project. The file declares the service name, the types, and the module augmentation that makes platform.get return a typed service. It is the only file of the service that is meant to be copied; everything else is internal to this plugin.

Table and Field Definitions Lime CRM

No fields or tables are needed

All you need is a configuration in config-module or a property on the web-component.

Back to top