Customization

Creating your own protocol item action

The list of available actions on protocol items are customizable and adding custom actions are as simple as building a command.

Tasks

1. Generate your command (see platform docs)
2. Add the formInfo: FormInfo; property to your command (FormInfo in Lime Elements)
3. Add code to your handler that uses the form protocol context from the command property formInfo.

Sample action: Add Picture

The following code can be used as a reference when building your own action.

add-picture.command.ts

import { FormInfo } from '@limetech/lime-elements';
import {
    Command,
    LimeWebComponentContext,
} from '@limetech/lime-web-components-interfaces';
import { FormItemAction } from '../../components/interface/config';

@Command({
    id: 'limepkg_form.addpicture',
})
export class AddPictureCommand implements FormItemAction {
    formInfo: FormInfo;
    context: LimeWebComponentContext;
}

add-picture.handler.ts

import { CommandHandler } from '@limetech/lime-web-components-interfaces';
import { PlatformUtils } from '../../services/platformutils';
import { AddPictureCommand } from './add-picture.command';
import {
    AttachOptions,
    FileService,
    FileServiceInterface,
} from '../../interfaces/limepkg-document-widget';

export class AddPictureHandler implements CommandHandler {
    private platformutils: PlatformUtils;

    constructor(private platform) {
        this.platformutils = new PlatformUtils(this.platform);
    }

    get fileService(): FileServiceInterface {
        const fileService = this.platform.get(FileService);
        if (!fileService) {
            throw new Error(
                'File service not found in platform. Did you forget to install limepkg-document-widget?'
            );
        }

        return fileService;
    }

    public async handle(command: AddPictureCommand) {
        const { formInfo, context } = command;

        if (!formInfo?.rootValue || !context?.id) {
            return;
        }

        let answer: string;
        if (typeof formInfo.rootValue[formInfo.name] === 'object') {
            answer = formInfo.rootValue[formInfo.name].value;
        } else {
            answer = formInfo.rootValue[formInfo.name];
        }

        const answerId = Number(formInfo.name);
        // eslint-disable-next-line @typescript-eslint/dot-notation
        const protocolName = formInfo.rootSchema['title'];
        // eslint-disable-next-line @typescript-eslint/dot-notation
        const protocolItem = formInfo.schema['title'];

        const documentLimetype = await this.platformutils.getLimetypeByLabel(
            'document'
        );
        const isAnswerRelatedToDocument =
            'limepkg_form_answer' in documentLimetype.properties;

        let fileCounter = 0;
        const options: AttachOptions = {
            context: context,
            beforeFileUpload: async (_file, document) => {
                let documentname = `${protocolName} - ${protocolItem}`;
                if (answer) {
                    documentname = `${documentname} - ${answer}`;
                }

                if (fileCounter > 0) {
                    documentname = `${documentname}(${fileCounter})`;
                }

                document.comment = documentname;

                fileCounter++;

                if (isAnswerRelatedToDocument) {
                    // eslint-disable-next-line camelcase
                    document.limepkg_form_answer = answerId;
                }
            },
        };

        return this.fileService.uploadFiles(options);
    }
}