Skip to content

Lime CRM Admin

This chapter delves into how Lime CRM Admin can be customized. Just as with the web client, Lime CRM Admin offers numerous customization options. You can implement a tailored administration experience, providing a more personalized environment according to the needs of your customization.

Introduction

Customizing Lime CRM Admin primarily involves defining a plugin class in the Python backend. This class is responsible for managing the settings associated with your customization, guiding the configuration process.

One key aspect of creating a plugin class is the definition of a schema. This schema is mainly used to validate the data before being saved to the database, but is also used as a roadmap for rendering a form on the client side. It tells Lime CRM Admin how the form should be structured and which fields it should contain.

Please refer to Runtime Configuration for more information on how to generate the plugin class to handle your customization's configuration.

Custom Components in Lime CRM Admin

Although Lime CRM Admin primarily focuses on enabling customization configuration, you can also create custom components to use in various sections or fields within the configuration form. This flexibility allows you to create forms that better meet your requirements and provide a more interactive configuration experience for the users.

To illustrate, let's start with a basic schema that will render a text field where the user can enter a color:

from marshmallow import Schema, fields

class MySchema(Schema):
    color = fields.String()

Though functional, this setup is not particularly user-friendly. A more intuitive approach would be to render a color picker instead of a standard text input field. Since the form is rendered using the limel-form component from Lime Elements, we can specify a custom component in the schema to achieve this:

from marshmallow import Schema, fields

class MySchema(Schema):
    color = fields.String(
        metadata={
            "lime": {
                "component": {
                    "name": "limel-color-picker",
                }
            }
        }
    )

Now, limel-color-picker from Lime Elements will be rendered instead of the standard input field. You can even create your own components in your customization. These components will also receive the platform and context properties, and all the services available on platform as in the web client.

To create a custom component, the component should implement the FormComponent interface from Lime Elements

Let's use an example where the user needs to configure a position. Rather than having two input fields for the user to manually enter the latitude and longitude, it would be much more user-friendly to simply select the location from a map:

from marshmallow import Schema, fields

class PositionSchema(Schema):
    lat = fields.Float()
    long = fields.Float()

class MySchema(Schema):
    position = fields.Nested(
        nested=PositionSchema,
        metadata={
            "lime": {
                "component": {
                    "name": "my-position-picker"
                }
            }
        }
    )

This new schema will render a position picker instead of the two input fields. Now, we need to implement the component:

import { Component, Prop, Event, EventEmitter } from '@stencil/core';
import { LimeWebComponentContext, LimeWebComponentPlatform } from '@limetech/lime-web-components';
import { FormComponent } from '@limetech/lime-elements';

type Position = { lat: number, long: number };

@Component(
    tag: 'my-position-picker',
    shadow: true,
)
export class PositionPicker implements FormComponent<Position> {
    @Prop()
    public platform: LimeWebComponentPlatform;

    @Prop()
    public context: LimeWebComponentContext;

    @Prop()
    public value: Position;

    @Event()
    public change: EventEmitter<Position>;

    public render() {
        // Render a map that lets the user pick a location
        // handleChangePosition will get called when location is picked
    }

    private handleChangePosition(event: CustomEvent) {
        this.change.emit({
            lat: event.detail.getLatitude(),
            long: event.detail.getLongitude(),
        });
    }
}

This example does not provide a full implementation but should serve as a guide to implementing a custom component. The crucial parts are:

  • The value prop will be the currently selected position. It will be given to the component when it's first rendered or when the position has been changed.
  • The render method should render the component as usual. Here, we assume that the map will emit an event when the position has been changed.
  • The change event should be emitted when the value has been changed. It's important that the type of the input and output value is the same, that is, the value prop and the value in the emitted change event.

As this chapter has shown, the possibilities for customization in Lime CRM Admin are extensive. By implementing a plugin class, defining a suitable schema, and harnessing the power of custom components, you can create a highly personalized administration experience for your users. The flexibility these tools provide means that the forms you create can meet the specific needs of each customization, greatly enhancing usability and interaction.

However, remember that each customization comes with its own set of challenges and requirements. Always plan ahead, considering your users' needs and the specific goals of your customization. Experimenting with the tools discussed in this chapter will help you discover what works best in your particular case.

In the end, a well-customized Lime CRM Admin can help make your team more efficient, your users more satisfied, and your projects more successful. Always keep in mind the power of customization, and never stop exploring the potential it holds.

As you continue your work with Lime CRM, remember to refer back to this guide, our other documentation, and the broader community for assistance and inspiration. Happy customizing!