Add custom class name for each step.

[889863]

How do I add a custom class name for each step . For example class="sqd-step-task sqd-type-custom-task sqd-type-custom-task-completed" . Something like this 'sqd-type-custom-task-completed' to show that this step is completed.

[b4rtaz]

Hello @889863,

you cannot add a custom class, but from the 0.19.4 version all step components have the data-step-id attribute in root nodes with step ids. By this you can create a CSS selector to a specyfic step.

.sqd-workspace-canvas g[data-step-id="6cc1da8be15b9c3173a2effc09705c2e"] rect {fill: red !important;}

If you want to show that the step is executed/completed you could use the loaded badge or implement a badge with a custom icon (documentation). Check this example. These badges are available in the pro version.

[tskomudek]

Hi @889863,

i think i did a similar thing by adding a custom StepComponentViewWrapperExtension:

class ExecutedStepComponentViewWrapper implements StepComponentViewWrapperExtension {

    public wrap(view: StepComponentView, stepContext: StepContext): StepComponentView {

        executedSteps.find(s => s.Id === stepContext.step.id);
        if (executedStep) {
            view.g.classList.add("sqd-execution-state-" + executedStep.State.toLowerCase());
        }
        return view;
    }
}

and a couple of css classes like .sqd-execution-state-done etc.
You need to add this extension to the designer component configuration.

Let me know if it helps.

Tilo

[b4rtaz]

@tskomudek the downside of your approach is that, you need to rerender the whole canvas (I guess you are using the updateRootComponent() method). This may be slow for large flows. Badges are working in a different way, the designer calculates deltas and repaint only changed badges.

The approach with CSS selectors that I explained in the first post should be also a good choice for large flows. We don't need to rerender the canvas, we just change CSS values.

[tskomudek]

@b4rtaz Thanks, that makes sense. Will give it a try ...

[889863]

Hi @889863,

i think i did a similar thing by adding a custom StepComponentViewWrapperExtension:

class ExecutedStepComponentViewWrapper implements StepComponentViewWrapperExtension {

    public wrap(view: StepComponentView, stepContext: StepContext): StepComponentView {

        executedSteps.find(s => s.Id === stepContext.step.id);
        if (executedStep) {
            view.g.classList.add("sqd-execution-state-" + executedStep.State.toLowerCase());
        }
        return view;
    }
}

and a couple of css classes like .sqd-execution-state-done etc. You need to add this extension to the designer component configuration.

Let me know if it helps.

Tilo

How do I do this for react apps

[889863]

better no to re-render the canvas but we can define some classes initially and add the classes on the fly. That will be good feature if you can implement.

[b4rtaz]

@889863 From my point of view I don't see any value for adding a duplicated approach to indicate a specific step. Now you can create CSS selectors that indicates

• specific components (.sqd-step-task, .sqd-step-container, .sqd-step-switch...),
• specific task types (.sqd-type-<type>),
• a specific task by using a task id (.sqd-step-switch[data-step-id="<stepId>"], .sqd-step-task[data-step-id="<stepId>"]...).