Elsa workflow designer client side API - api

Question

I have to persist / save workflow using custom javascript code, not by using built-in designer publish button. So is there any client side API like
const elsaStudioRoot = document.querySelector('elsa-studio-root');
that is using for registering custom plugins.

Answer 1

The elsa-studio-root element does not expose any methods or services that you can leverage, but it would make sense for it to do. You could create an issue and/or submit a PR.
Alternatively, or as a temporary workaround, you could write a plugin that captures the ElsaStudio service, which provides access to the elsaClientFactory factory method.
This factory method produces an instance of ElsaClient, which offers direct API access to the workflow server, which exposes an endpoint to update workflow definitions.
For example (untested code):
// Declare a variable you can access from wherever you want.
let elsaClientFactory = null;
// Declare an Elsa plugin.
function CaptureElsaClientFactoryPlugin(elsaStudio) {
// Capture the elsa client factory method.
elsaClientFactory = elsaStudio.elsaClientFactory;
}
// Register the plugin.
elsaStudioRoot.addEventListener('initializing', e => {
const elsa = e.detail;
elsa.pluginManager.registerPlugin(CaptureElsaClientFactoryPlugin);
});
// Retrieve an elsa client service.
var elsaClient = elsaClientFactory();
// Save some workflow definition
await elsaClient.workflowDefinitionsApi.save({
workflowDefinitionId: 'some workflow definition ID',
name: 'optional',
displayName: 'optional',
description: 'optional',
publish: true, // or false if you don't want to publish but save as draft.
activities: [],
connections: []
// etc. See https://github.com/elsa-workflows/elsa-core/blob/master/src/designer/elsa-workflows-studio/src/services/elsa-client.ts#L377 for a full list of fields you can specify.
});