Checklist item Actions¶

You can per checklist item configure a set of actions that the user can choose to use.

To configure an action you need to set some or all of these properties

Name	Type	Description
Title	`string`	The name/text that the user see when using the action
Type	`option`	What type of action that you want. You can see them here
Action	`string`	Depending on the Type of action you configure this is used a little differently
Font Awesome Icon	`string`	What icon to use in the Desktop client
Icons8 Icon name	`string`	What icon to use in the Web client

Description of Action types¶

Action Type	What does `Action` contain	Description	Works in Web client?	Works in Desktop client?
Desktop Email Template	Name of template (template manager)	Renders a email template from the template manager in desktop and opens it	`-`	`Yes`
Desktop Document Template	Name of template (template manager)	Render and saves a document from the template manager in desktop and opens it	`-`	`Yes`
Custom VBA	Name of VBA Sub `MyModule.MySub`	Executes the given Sub/Function in VBA	`-`	`Yes`
External Link	Link/path to file to open	Executes the given link	`Yes`	`Yes`
Web Document Template	Name of template (limepkg-document-templates)	Renders and saves a document template from the web and opens the document card	`Yes`	`-`
Webclient Command	`CommandId` to run	Executes the given commandId	`Yes`	`-`
Create Related Object	Relation to create object in	Opens a "Create new dialog" of the given relation	`Yes`	`-`

Example of Actions¶

Run a webclient action¶

The command needs specific properties. Below you can see an example.

Data provided to the command¶

Name	Type	Description
item	`ChecklistItemTemplate`	Containing all information about the item the actions was on
userAction	`ChecklistUserAction`	Containing all information about the userAction the user used
context	`LimeWebComponentContext`	The context the user was on while using the action limetype and id of the limeobject

How to create a command for the checklist¶

First make sure that you have a frontend folder in your package or solution, if not, you need to create it using lime-project.

Run the command lime-project generate command <command id to create> to create a new command.

This will generate <your-id>.command.ts (command file) and <your-id>.handler.ts (handler file)

You can read more about commands here

Command file¶

Example here

In the command file you add what properties your command takes (Put it as variables in the generated class).

So you'll need to add the following:

Unfortunately you can't access the interfaces of the checklist in your solution or package so you'll need to define them yourself or use the any type.

{
    item: any; // ChecklistItemTemplate;
    userAction: any; // ChecklistUserAction;
    context: LimeWebComponentContext;
}

Handler file¶

Example here

You then implement the handler, basically what your command will do. You can provide a constructor to the class where you in the loader can send the wanted services you'll need. In the example you can see:

HttpService
NotificationService
RouteService

You have a function called handle that takes the command as a parameter and will be executed when the user uses your action.

Loader function¶

Example here

For your command to be available for the web client, you need to register the command in the loader class of your package/solution. This will be generated when you first create your frontend using lime-project. You can find it under solution_or_package/frontend/src/components/lwc-solution_or_package_name-loader/

In the function componentWillLoad you can register this. The best is to create a private function in the class that you call so it's easier to read. (See the example below)

Example command that closes an helpdesk that create a new deal and redirects the user to the new deal¶

Example command file¶

@Command({
    id: "limepkg_dynamic_checklist.checklist-create-deal",
})
export class ChecklistCreateDealCommand {
    item: ChecklistItemTemplate;
    userAction: ChecklistUserAction;
    context: LimeWebComponentContext;
}

Example handler file¶

import {
    CommandHandler,
    HttpService,
    RouteService,
    NotificationService,
} from "@limetech/lime-web-components-interfaces";
import { ChecklistCreateDealCommand } from "./checklist-create-deal.command";

export class ChecklistCreateDealHandler implements CommandHandler {
    constructor(
        protected httpService: HttpService,
        protected notificationService: NotificationService,
        protected routeService: RouteService
    ) {}

    public async handle(command: ChecklistCreateDealCommand): Promise<void> {
        try {
            const deal = await this.createNewDeal(command);
            await this.closeHelpdesk(command);

            this.routeService.limeObject("deal", deal._id);
        } catch (ex) {
            console.error(ex);
            this.notificationService.notify(
                "Something went wrong while creating the deal..."
            );
        }
    }

    private async createNewDeal(command: ChecklistCreateDealCommand) {
        const currentLimeobject = await this.httpService.get(
            `api/v1/limeobject/${command?.context?.limetype}/${command?.context?.id}/`
        );

        const deal = await this.httpService.post("api/v1/limeobject/deal/", {
            name: `My deal from: ${command.item.title} using action ${command.userAction.title}`,
            value: 1337,
            company: currentLimeobject.company,
        });
        return deal;
    }

    private async closeHelpdesk(command: ChecklistCreateDealCommand) {
        return await this.httpService.put(
            `api/v1/limeobject/${command.context.limetype}/${command.context.id}/`,
            {
                helpdeskstatus: "done",
            }
        );
    }
}

Example loader file¶

import {
    LimePluginLoader,
    LimeWebComponentContext,
    LimeWebComponentPlatform,
    PlatformServiceName,
    CommandBusService,
} from "@limetech/lime-web-components-interfaces";
import { Component, Prop } from "@stencil/core";
import { ChecklistCreateDealCommand } from "../../commands/checklist-create-deal/checklist-create-deal.command";
import { ChecklistCreateDealHandler } from "../../commands/checklist-create-deal/checklist-create-deal.handler";

// NOTE: Do NOT remove this component, it is required to run the plugin correctly.
// However, if your plugin has any code that should run only once when the application
// starts, you are free to use the component lifecycle methods below to do so.
// The component should never render anything, so do NOT implement a render method.

@Component({
    tag: "lwc-limepkg-dynamic-checklist-loader",
    shadow: true,
})
export class Loader implements LimePluginLoader {
    @Prop()
    public platform: LimeWebComponentPlatform;

    @Prop()
    public context: LimeWebComponentContext;

    // eslint-disable-next-line @stencil/own-methods-must-be-private
    public componentWillLoad() {
        this.registerChecklistCommand();
    }

    // eslint-disable-next-line @stencil/own-methods-must-be-private
    public componentDidUnload() {}

    // eslint-disable-next-line @stencil/own-methods-must-be-private
    public componentWillUpdate() {}

    private registerChecklistCommand() {
        const commandBusService: CommandBusService = this.platform.get(
            PlatformServiceName.CommandBus
        );
        const myHandler = new ChecklistCreateDealHandler(
            this.platform.get(PlatformServiceName.Http),
            this.platform.get(PlatformServiceName.Notification),
            this.platform.get(PlatformServiceName.Route)
        );
        commandBusService.register(ChecklistCreateDealCommand, myHandler);
    }
}