Help with createStepModel about sequential-workflow-editor HOT 10 CLOSED

Hello @NexPlex!

For branched steps you should use the createBranchedStepModel method. Check this example.

For sequential steps you should use the createSequentialStepModel method. Check this example.

I noticed also your interfaces have properties on the wrong level. All properties should be inside the properties field.

export interface SetStep extends Step {
  type: 'set';
  componentType: 'task';
  properties: {
    result: NullableAnyVariable;
    value: Dynamic<NullableAnyVariable | string | number | boolean>;
  };
}

from sequential-workflow-editor.

Ok I see what you mean. Resolved the issue. thank you so much!!

from sequential-workflow-editor.

Hi thank you for the feedback,

when implementing the createBranchedStepModel method from your link, I'm getting an error on this line.

const a = context.formatPropertyValue('a', StepNameFormatter.formatDynamic);

Cannot read properties of undefined (reading 'formatDynamic')

from sequential-workflow-editor.

You don't need StepNameFormatter to create a branched step model or a sequential step model (btw: the StepNameFormatter is defined at the app level, so it's a custom function).

Here you can find simpler examples:

• https://github.com/nocode-js/sequential-workflow-editor/blob/main/demos/webpack-app/src/playground/model/if-step-model.ts
• https://github.com/nocode-js/sequential-workflow-editor/blob/main/demos/webpack-app/src/playground/model/loop-step-model.ts

I would recommend to copy a code from these examples iteratively, not all at once. This will help you to understand what is wrong.

Try to start from a simple branched step like:

export const ifStepModel = createBranchedStepModel<IfStep>('if', 'switch', step => {
	step.branches().value(
		createBranchesValueModel({
			branches: {
				true: [],
				false: []
			}
		})
	);
});

Then add next value models for properties.

from sequential-workflow-editor.

This demo is available online here. If you select any if step you can see how it looks:

These properties use the dynamic value model, you can read more about it here.

from sequential-workflow-editor.

Thank you for you help I got the if and loop running without error. I'm having a challenge showing the editor properties window correctly.

in ts

public ngOnInit() {
    const editorProvider = EditorProvider.create(definitionModel, {
        uidGenerator: Uid.next
      });
      this.stepEditorProvider = editorProvider.createStepEditorProvider();
      this.rootEditorProvider = editorProvider.createRootEditorProvider();
      this.validatorConfiguration = {
        root: editorProvider.createRootValidator(),
        step: editorProvider.createStepValidator()
      };
}
      

in HTML

	[rootEditor]="rootEditorProvider"
	[stepEditor]="stepEditorProvider"
	

I'm getting this error:
Cannot read path: properties/inputs

is this related to this code in my model?

export interface MyDefinition extends Definition {
  properties: {
    inputs: VariableDefinitions;
  };
}

export const rootModel = createRootModel<MyDefinition>(root => {
  root.property('inputs')
    .value(
      createVariableDefinitionsValueModel({})
    );
});

from sequential-workflow-editor.

I suppose your start definition doesn't have any value for the inputs field in the root properties.

{
  "properties": { "inputs": { "variables": [] } },
  "sequence": [  ]
}

To create a start definition from the model you can use:

editorProvider.activateDefinition()

from sequential-workflow-editor.

Sorry, I'm not understanding how to use or where it goes. can you provide an example?

{
"properties": { "inputs": { "variables": [] } },
"sequence": [ ]
}

from sequential-workflow-editor.

If I print to console activatedDefinition seems fine

const editorProvider = EditorProvider.create(definitionModel, {
    uidGenerator: Uid.next
  });
  const activatedDefinition = editorProvider.activateDefinition();
  console.log('activatedDefinition', activatedDefinition)

  this.stepEditorProvider = editorProvider.createStepEditorProvider();
  this.rootEditorProvider = editorProvider.createRootEditorProvider();
  this.validatorConfiguration = {
    root: editorProvider.createRootValidator(),
    step: editorProvider.createStepValidator()
  };

from sequential-workflow-editor.

It should be something like this (I didn't test it).

public definition: Definition;

public ngOnInit() {
  const editorProvider = EditorProvider.create(definitionModel, {
    uidGenerator: Uid.next
  });
  this.definition = editorProvider.activateDefinition();
  // ...
}

<sqd-designer
  [definition]="definition"
  ...
></sqd-designer>

from sequential-workflow-editor.