Camunda BPMN styling

Camunda 7 Topics Discussion & Questions
,
1

Hi,

Following is my UI, Is there a way i can customize the input/select/tabs/models as angular-material styles.

image
image1366×696 76.1 KB

2

Yes there is.

You can use CSS to do so.

Hope this helps!

1 Like
3

Thanks @nikku,

Ya But, CSS wont work in my case, as i have to add html elements along with it like this

<mat-form-field>
    <mat-label><span class="fa fa-search"></span> Search for an app</mat-label>
    <input matInput name="search" value="searchText">
    <button mat-button *ngIf="searchText" matSuffix mat-icon-button aria-label="Clear" (click)="clearSearchText()">
        <mat-icon>close</mat-icon>
    </button>
</mat-form-field>
4

@Niall can you help me out here.

Thanks
Jerin

5

Niall, felix-mueller, vale, StephenOTT, nikku

We are using above kind of UI for our application.
Here XML is used to create BPMN diagram and its the output for Camunda engine used in backend.

What i require is any help if we can use JSON here, in place XML. Just on UI side to handle it effectively rather than using basic camunda given UI.

Thanks
Jerin John

6

Let me know if there’s any ref to take

7

Sorry for not getting back to you earlier.

I propose the following:

  • You share what you attempt to do, i.e. in a CodeSandBox. Simplify your example as much as possible and clearly identify the place where you got stuck
  • We will have a look into that simplified example and see how we can help you

Generally speaking, you are working with a library here. As we do not have Angular specific bindings (nor Material UI magic hooks built in) you should try to understand how the library works.

What could also help is to understand how to work with plain JS libraries from Angular.

8

If you desire anything beyond the basic UI Camunda has to offer, consider building your own properties panel with Angular / Material UI. It is straight forward.

You may use our react properties panel example as a reference.