►
From YouTube: Elsa Community Meeting 35
Description
A brief update on Elsa Studio, a Blazor implementation of the workflow designer.
A
A
Looks
like
it's
just
me
today
and
that's
fine
use
this
session
to
talk
a
little
bit
about
the
Blazer
dashboard
progress
and
look
at
the
different
details
and
see
how
far
we
get
with
that.
So,
let's
take
a
look.
So
since
last
week,
I've
made
I've
been
just
primarily
working
on
the
dashboard,
which
is
renamed
to
Elsa
Studio
and
just
recap:
it's
a
re-implementation
of
the
also
dashboard
using
Blazer
and
specifically
using
the
multi
Blazer
component
Library.
It's
significantly
sped
up
the
implementation
as
you'll
see.
So,
let's,
let's
take
a
quick
look.
A
So
let
me
first
clear
my
cookies
and
start
from
the
login
screen,
so
there's
a
an
actual
login
screen
that
is
connected
to
the
back
end.
So
like
the
stencil
implementation,
it's
connected
to
the
same
back
end.
So
now
we
have
basically
two
clients.
One
bill
is
using
stencil
and
the
other
one
using
Blazer.
So
let's
yeah,
let's
take
a
look
at
the
login
screen.
First,
so
the
first
thing:
you'll
notice
it
it
because
it
uses
mud
Blazer,
it
has
validation,
UI
built
in
which
is
pretty
nice,
I'm,
not
sure
what
this
is
about.
A
A
It's
quicker
like
this.
Of
course,
I
should
probably
implement
some
validation
server
side
without
even
trying
to
validate
the
credentials
all
right.
Let's
try
this
again
and
this
time
I'll
just
enter
at
least
some
some
value
and
then,
when
I
log
in
we'll
we'll
see
the
use
of
the
mud,
Blazer
I
think
it's
called
snack
bar.
So
that's
that's
a
UI
component
right
there.
Now,
let's
try
logging
in
with
a
real
username
password
and
now
we're
logged
into
the
the
backend
or
the
the
dashboard.
A
Let's
see
some
of
the
changes
since
last
week
is.
We
now
have
an
environment
bigger,
so
that's
a
New
Concept
in
else
Studio,
where
you
can
connect
your
your
studio
to
a
configured
environment.
So
this
could
be
staging
or
your
local
machine
local
will.
It
means
it
points
to
the
local
server
running
here
in
asp.net
core,
specifically,
that's
the
I
also
work
for
Server
web
bundle,
which
is
just
the
other
server.
It
doesn't
host
the
dashboard
like
the
all-in-one
which
hosts
the
the
backend
server,
as
well
as
the
the
stencil
component.
A
So
here
we
connected
to
that
and
when
I
change
this,
it's
not
currently
implemented.
It's
a
UI
thing
only,
but
the
idea
is
to
when
you
switch
that
every
time
you
a
new
request
is
made.
So,
for
example,
if
you
go
to
definitions,
it
loads
definitions
from
this
environment.
So
here
we
see
the
list
of
definitions
and
this
is
actually
implemented.
A
So
this
is
actually
fetched
from
the
the
back
end
and
we
can
click
on
it
and
then
we
see
in
the
current
state
of
the
the
workflow
designer
which
is
in
structure
it's
similar
to
what
we
have
here.
If
we
log
in
here,
we
go
to
the
workflow
designer.
Here
we
have
the
activity
picker
on
the
left,
which
we
have
here
as
well.
So
we
have
the
categories.
As
you
can
see,
it's
not
implemented,
it's
not
bound
against
the
actual
activities.
A
That's
that's
yet
to
be
done,
but
here
we're
using
the
this
I
think
it's
called
the
stack
panel
or
collapsible
I,
don't
recall,
but
it's
a
component
of
mods
Blazer,
and
here
we
have
a
two-bit
implemented
manually
instead,
so
and
of
course
we
have
the
properties
here,
on
the
right
hand,
side
variables,
settings
input,
outputs.
All
of
these
things
remain
to
be
implemented,
and
this
is
just
an
initial
work
in
progress.
Another
thing,
I've
noticed
is
these
resizable.
These
resize
handles
these
paints,
which
you
can
collapse
and
expand,
and
what's
what's
cool
about
this?
A
Is
it
I
didn't
have
to
implement
this
myself,
and
this
is
not
a
component
from
mud
Blazer,
but
from.
Let
me
remind
myself,
I
think
a
red
sand
is
that
it
red
sand.
Yes,
so
red
sand
is
also
plays
a
component
Library,
it's
open
source,
it's
MIT
and
they
have
a
whole
host
of
components
and
for
now
I'm
only
using
this
splitter,
but
maybe
there
will
be
other
useful
components
as
well
to
be
used
and
at
the
bottom
we
have
the
DVT
inputs
editor.
A
So
here
we'll
be
able
to
have
a
list
of
inputs,
input
controls
to
edit
the
settings
of
iPhone
activity,
the
outputs,
some
common
settings
like
IDE
and
display
name,
and
maybe
some
advanced
settings
so
I-
think
that's
pretty
much
it
for
now
for
the
actually,
no
there's
one
more
thing:
there's
a
tab
UI
here.
So
the
idea
is
that
we
can
open
multiple
workflow
definitions
without
having
to
to
things
like
here
so
here
in
the
stencil
designer.
A
If
you
want
to
edit
another
definition,
you
have
to
go
to
the
browser
and
then
let's
say
we
have
another
one,
and
then
let's
say
we:
maybe
this
is
like
a
sub
workflow.
Maybe
we
have
a
sub
workflow
and
now
imagine
we
made
some
changes.
Let's
ignore
this
one
and
then
now
we
want
to
actually
use
the
sub
workflow
right.
So
we
go
back
to
the
other
one
there's
a
little
bug
in
the
designer
currently,
where
I
have
to
refresh
the
entire
screen.
In
order
to
see
the
software
flow
appear
in
the
Picker.
A
That's
why
I
did
a
refresh,
but
now
I
can
use
this.
But
imagine
now
I
want
to
be
able
to
edit
the
implementation.
I
would
have
to
go
back
to
the
subwork
all
right.
So
you
get
the
idea,
that's
quite
annoying!
So
that's
that's
going
to
be
fixed
with
these.
These
tabs,
so
I
can
quickly
switch
between
different
workflows,
currently
there's
a
little
bug
if
I
click,
if
I
switch
too
quickly,
it's
not
going
to
keep
up
and
then
some
js
interrupt
error
occurs.
A
So
that
needs
to
be
fixed,
I
notice
that
the
sub
workflow
appears
here.
So
so
it's
it's
as
I
mentioned
it's
connected
to
the
backends
yeah.
So
that's
these
things
not
yet
sure
how
to
open
an
existing
or
create
a
new
workflow
by
clicking
the
plus
tab.
One
idea
is
to
have
component
here
that's
similar
to
the
definitions
table
that
we
see
here
so
that
you
can
quickly
open
and
and
search.
A
So
it's
going
to
be
a
reusable
component,
as
you
can
imagine,
there
will
be
filters
here
to
quickly
open
and
find
and
open
the
workflow.
You
want
to
open
in
the
editor
and-
and
it
should
be
an
option
like
this
one
create
new
workflow.
If
you
want
to
create
a
new
workflow,
yeah,
also
I'm,
taking
this
opportunity
to
use
version,
think
version
2
of
X6,
it's
newer
than
the
1.3
version
used
in
the
stencil
implementation.
A
So
taking
advantage
of
that,
and
while
doing
the
green
implementation,
I'm
also
going
to
experiment
with
features
that
are
provided
by
X6
like
this
sort
of
tooling,
where
you
can
tweak
the
connections,
for
example,
and
there's
also
you
option
to
allow
you
to
resize
these
activities,
so
I'm
probably
going
to
do
some
experience
with
that,
so
that
you
have
more
control
over
it.
The
look
and
feel
of
your
your
workflow,
but
also
things
like
annotations
little
Post-its
that
you
might
want
to
add
to
your
activities
in
order
to
to
make
it
more
descriptive.
Yeah.
A
So
I
mentioned
these
environments,
and
here
will
be
a
button
that
allows
allows
you
to
deploy
this
workflow.
Let's
say
I'm
on
the
local
environment,
I'm
editing,
my
local
workflow
and
now
maybe
I
want
to
deploy
it
to
the
staging
environment.
So
maybe
there
should
be
a
button
here
that
allows
you
to
select
the
environment
to
deploy
to.
A
Alternatively,
we
could
imagine-
maybe
a
separate
deployment
section
on
in
the
in
the
left
hand
menu
from
where
you
can
have
all
sorts
of
control
of
what
to
deploy
where
very
similar
to
Orchard
core,
which
also
has
a
separate
deployments
section,
allowing
you
to
deploy
content
to
a
different
server,
so
might
be
interesting
to
take
a
look
at
that
all
right
and
what
else
so?
There's
little
alignment
UI
helper,
that
that's
new
the
connections
themselves,
I
think
are
a
little
bit
better
they're
they're,
better
Corners.
A
If
you
will,
if
you
compare
that
to
this
implementation,
and
of
course
this
is
nothing
to
do
with
blazer
it's
it's.
However,
you
configure
X6
but
think
it's
on
the
search
in
certain
scenarios.
The
the
curves
are
not
as
nice,
I
think
so,
for
example,
here
I
don't
know
it's
it's
not
too
different,
but
I
for
some
reason,
I
think
it.
It
seems
a
little
bit
better.
Of
course,
a
big
difference
is
that
these
these
ports,
they
they
shift
location
as
you
move
around
the
thing
and
that's
yet
to
be
implemented.
Yeah.
A
It's
funny
I
thought
I
thought
this
looked
better,
but
now
that
I
look
again
at
the
way
the
curves
go.
It's
not
that
different
anyway.
Moving
on
this,
of
course,
is
the
activity
path
which
we
also
have
here.
That's
that's
this
implementation,
the
the
tool
buttons
here
outer
layout
and
zoom
to
fit
now.
Look
like
this,
so
we
have
zoom
to
content,
Zoom
content
to
fit
the
screen
and
our
layout,
and
maybe
this
will
be
a
drop
down
menu.
So
you
can
choose
the
direction.
A
Of
course,
a
very
important
aspect
of
this
Blazer
implementation
is
the
extensibility.
So
what
you
can
see
on
the
left
hand,
side
is
a
few
stubbed
modules,
so
there's
a
security
module
that
allows
you
to
will
allow
you
to
manage
users
and
roles.
Of
course,
we
could
do
it
as
well
in
this
stencil
component,
but
a
big
reason
to
to
spend
more
time
on
the
on
the
Blazer.
Implementation
is
because
it's
easier
for
developers
to
extend
with
their
own
implementations.
A
There
are
modules
and
and
because
of
mud
Blazer,
which
implements
materials
design,
it's
so
much
easier
to
to
use
the
existing
components
and
and
just
focus
on
an
actual
functionality
versus
having
to
do
things
in
stencil.
We
don't
have
this
advantage
of
using
these
components,
so
that's
a
big
plus
for
using
Blazer
and
and
any
other
component
library,
of
course.
So
if,
if
we
were
to
implement
it
in
react,
we
would
have
the
same
benefits.
A
This
does
raise
the
question
how
to
reuse
this
designer
in
in
your
own
dashboard
application
right
and
for
that
the
stencil
component
is
great,
because
it's
there
it's,
it
doesn't
have
any
dependency
on
a
UI
framework
other
than
a
small
dependency
on
stencil
at
runtime.
But
that's
like
a
really
small
dependency
that
doesn't
get
in
the
way.
But
then
there
is
this
limitation
of
you
know
the
this.
A
Well
when
using
Blazer
you
can
create
laser
components
and
wrap
them
in
custom
Elements,
which
works,
and
that
could
be
a
an
Avenue
for
other
developers
that
have
their
own
dashboard,
which
could
be
created
in
react
or
angular
view.
It
doesn't
matter,
maybe
even
plain
HTML
and
jQuery,
and
they
would
also
be
able
to
reuse
the
designer.
But
then
again
comes
the
question,
but
if
they
wanted
to
leverage
whatever
component
framework,
they
are
using,
for
example,
to
implement
the
activity
picker
and
the
activity
property
editors
here,
I'm
using
Blazer
components.
A
Even
these
activities
are
Blazer
components,
wrapped
in
a
custom
element
which
is
pretty
cool,
so
I
can
imagine.
Similarly,
you
may
want
to
do
it
in
your
own
dashboard,
so
the
jury
is
still
out
there
if
in
terms
of
what
what
should
be
done
and
because
it's
not
quite
clear
this,
this
component
will
remain
to
be
supported
so
that
you
can
embed
it
as
is
without
with
or
without
this
toolbar
in
your
own
application.
But
yeah.
This
discussion
is
still
ongoing
and
any
thoughts.
Any
feedback
is
very
welcome
all
right.
A
So,
as
you
see
these,
these
modules
are
stopped
out.
So
it's
there's
no
actual
implementation.
Yet
there's
going
to
be
a
Secrets
module
that
allows
you
to
manage
Secrets,
which
we
have
in
LSAT
2
web
hooks.
We
also
have
it
in
also
too,
but
that's
a
different
implementation.
The
web
hooks
module
here.
It's
going
to
allow
you
to
manage
web
hooks
exposed
by
Elsa
and
in
Elsa
2.
A
The
webhooks
module
is
about
consuming
web
books
from
other
systems,
but
here
potentially
it's
going
to
be
both
and,
of
course,
the
counter
module
is
just
a
sample
module.
Let's
see
if
I
forgot
anything
dark,
Mode's
very
important,
I
think
I
showed
this
last
time
as
well.
So
that's
pretty
cool,
there's
just
one
thing:
I
I
still
need
to
implement
it
for
this
design
service
right
now
it's
a
little
bit
bright
or
the
contrast
is
a
little
bit
much
I
think
so.
A
Maybe
these
design
servers
here
should
be
a
little
bit
darker,
probably
maybe
the
same
contrast
as
here
so
yeah.
That's
the
current
state
I'm
currently
focusing
well
making
this
this
look
a
little
bit
better
in
dark,
dark
mode
and
then
right
after
I'm
gonna
actually
start
con
consuming
the
backend
apis
to
to
bind
the
categories
and
activities
from
here
and
then
being
able
to
drag
and
drop
it
to
the
service
and,
of
course,
that
the
service
being
fed
from
the
currently
loaded,
workflow
definition
and
and
continue
from
there
like
activity
input
properties
all
right.