import React from 'react'; import { BpmnDocumentModel, BpmnElementType, EditorDocument, LabelWithRuntimeExpressionHint, MultiLineCodeEditor, Pane, PaneBody, PaneComponentProps, PaneHeader, PaneProperty, PaneProvider, SelectOption, Studio, } from '@5minds/processcube_studio_sdk'; export const paneProvider: PaneProvider = { getPaneTitle: getPaneTitle, Pane: PaneFull, PaneContent: PaneContent, shouldBeDisplayed: shouldBeDisplayed, }; function getPaneTitle(): string { return 'Custom External Task Pane'; } function PaneFull(props: PaneComponentProps): JSX.Element { return ( {props.collapsed !== true && } ); } function shouldBeDisplayed( editorDocument: EditorDocument, editorDocumentModel: BpmnDocumentModel, studio: Studio, ): boolean { if (editorDocument?.documentType !== 'bpmn') { return false; } const selectedElements = editorDocumentModel?.selection?.getElements(); const isExternalServiceTask = selectedElements?.length === 1 && selectedElements[0]?.type === BpmnElementType.ExternalServiceTask; if (!isExternalServiceTask) { return false; } const element = editorDocumentModel.selection.getOnlyElementOrNull(); const customExternalTaskType = element?.customProperties?.find( (customProperty) => customProperty.name === 'studio.externalTask.customType', )?.value; const isMyCustomExternalTask = customExternalTaskType === 'MyCustomExternalTask'; return isMyCustomExternalTask; } function PaneContent(props: PaneComponentProps): JSX.Element { const element = props.editorDocumentModel.selection.getOnlyElementOrNull(); const updateExternalTask = (externalTask: any): void => { props.editorDocumentModel.elements.setElementProperty(element.id, 'externalTask', externalTask); }; let declarationFiles: string[] = []; props.studio.commands .executeCommand>('bpmn.editor.getDefaultJavaScriptDeclarationFile', [props.editorDocument]) .then((declarationFile) => { declarationFiles.push(declarationFile); }); const selectOptions = [ { label: 'Custom Topic 1', value: 'custom-1' }, { label: 'Custom Topic 2', value: 'custom-2' }, ]; const selectedOption = selectOptions.find((option) => option.value === element.topic); return (

updateExternalTask({ topic: option.value })} value={selectedOption} /> updateExternalTask({ payload: value })} declarationFiles={declarationFiles} />

); }

Lädt...