►
From YouTube: Elsa Workflows Community Meeting 39
Description
In this meeting, we take a look at the progress of Elsa Studio, a Blazor re-implementation of the Elsa 3 workflows designer + re-hosting options in other applications built with technologies such as React, Angular, Vue, etc.
A
A
Started
we
got
Muhammad
and
myself,
of
course,
and
let's
take
a
look
at
one
notes
and
if
you
have
any
topics
you
would
like
to
discuss,
let
me
know
for
my
end:
I
just
have
Elsa
Studio
progress
and
I.
Think
you're
gonna,
like
what
I'm
about
to
show
I,
don't
think
July
6
has
happened
for
me,
so
I'm
gonna
change
this
to
July
27th.
A
First,
let
me
it's
it's
there's
so
many
so
many
changes
that
I've
made
so
I'm
not
sure
what
I.
What's
the
last
thing
that
I
showed
so
maybe
we
should
just
go
through
the
entire
thing
and
and
if
you
have
any
questions
or
anything
that
comes
up
we'll
just
discuss
as
we
as
we
go
along
and
go
through
the
changes
so
first,
let
me
make
sure
that
server
is
running
and
by
server.
This
is
the
ASP,
the
the
Blazer
server
application.
A
Just
to
remind
you,
the
also
Studio
project
is
implemented
using
Blazer
and
it
has
it's
implemented
as
a
Razer
class
Library,
which
means
you
can
host
it
either
in
laser
server,
but
also
Blazer,
wasm,
webassembly
and
but
for
debugging
and
development.
It's
for
me.
It's
easy
to
use
server,
especially
because
of
the
debugging,
but
it's
just
it
works
just
as
well
on
using
web
percent.
A
If
you,
if
you
clone
the
repo
to
try
it
out,
you
can
start
either
one,
so
you
can
see
there's
server
or
Horizon
for
now,
I'm
gonna
just
start
server,
but
it
wasn't
works
as
well.
So
this
is
started.
It
requires
an
active
or
running
a
workflow
server,
so
I
have
a
workflow
server
running
in
a
separate
project.
So
this
is
just
the
also
three
thing
using
the
also
workflow
server
web
reference
application
all
right.
So
let
me
refresh
so
this
hasn't
changed.
It's
still
the
same
old,
boring
dashboard.
A
You
can
imagine
that
in
the
future
there
will
be
modules
that
can
add
widgets
to
the
dashboard
and
maybe
even
down.
The
line
will
allow
users
who
have
access
rights
to
visually
configure
the
dashboard
with
so
whatever
useful
widgets
they
they
might
want
to
see
on
the
dashboard
could
be
personalized
yeah,
so
none
of
these
things
have
changed,
except,
of
course,
for
the
workflows.
So
we
have
word
for
definitions.
This
is
a
list
of
all
of
the
definitions
in
the
system.
A
Pagination
support,
Co-op,
sorting,
Community
isn't
fixed
so
that
it
is
still
on
the
to-do
list,
but
it's
gonna.
This
is
how
it's
gonna
work,
so
you're
going
to
be
able
to
just
click
on
the
columns
to
order
by
this
column
and
then
also
change
the
ascending
and
descending
order
by
just
toggling
this,
this
little
arrow.
A
Next
to
the
column
name,
block
actions
have
been
implemented,
so
you
can
now
bulk
delete
the
definitions
or
you
can
publish
them
and
unpublish
them
and
of
course
you
can
do
it
individually,
so
you
can
edit
a
given
definition,
delete
it,
publish
it
unpublish
it
or
you
can
download,
which
will
just
give
you
a
Json
representation
of
the
word.
For
definition,
here's
a
button
to
create
a
workflow-
that's
that's
been
there
from
the
beginning.
So
if
you
click
on
this
one,
it
will
allow
you
to
create
a
workflow,
give
it
a
name
in
the
description.
A
Then
it
will
complain
about
the
name
already
existed
to
change
it
to
to,
for
example,
which
is
what
it
suggested
initially
all
right,
then
here
we
have
the
designer
we
still
have
the
Picker,
on
the
left
hand,
side,
activity,
properties
at
the
bottom
or
input,
output
and
common
settings
there.
Even
though
there's
no
activities
here,
we
still
see
settings
of
some
activity,
which
is
the
flowchart
activity
itself,
which
is
what
we
are
editing
here.
A
So
the
workflow
definition
itself
will
have
a
root
or
it
has
a
Roots
property
of
type
activity
and
when
using
the
designer,
it's
instantiating
a
flowchart
activity,
and
this
is
the
designer
for
this
activity.
Speaking
of
designer
support,
this
Elsa
Studio
has
support
for
multiple
kinds
of
designers
and
that
out
of
the
box,
there
will
just
be
two
for
now.
A
But
the
architecture
is
set
up
such
that
we
could
add
support
for
sequence,
diagram,
editors,
State,
machine
mbpmn
in
the
future
yeah.
So
just
brief
note
on
that.
So
this
is
the
these
are
the
settings
of
this
flowcher,
but
of
course
we
want
to
add
activities
to
it.
So
here
we
have
a
simple
write
line
activity
with
configure
it
like
Hello
World.
It
doesn't
have
any
outputs,
but
of
course
it
does
have
a
few
common
settings
and
what's
changed?
A
Is
that
IDs
are
now
read-only
and
generated
for
you,
which
simplifies
a
few
things
and,
and
the
most
obvious
thing
probably,
is
the
fact
that
this
is
unique
across
the
entire
hierarchy
of
the
the
graph
of
the
workflow
graph.
In
order
to
guarantee
uniqueness,
when
using
the
stencil
implementation,
the
a
notion
was
introduced,
called
node,
ID
and
node
ID,
you
was
is
basically
a
concatenation
of,
for
example,
in
this
case
the
idea
of
the
flowchart,
and
then
it
contains
this
brightline
activity
which
has
its
own
ID.
A
So
using
the
old
designer
you
would
have
flowchart
one,
for
example,
and
this
would
be
right
line
one
and
then
those
two
concatenated
would
represent
the
node
ID
in
this
way
across
the
hierarchy,
you
would
have
uniqueness
for
the
identifiers,
but
this
is
a
much
simpler
approach.
So
so
that's
that's
why
it's
now
just
generated-
and
this
is
a
short
good.
So
it's
like
a
good,
but
in
a
shorter
format,
name
is
configurable,
so
it
uses
the
same
name
default,
name
generation,
logic
that
was
originally
used
for
the
ID.
A
But
now
it's
useful
name
and
this
allows
you
to
still
use
JavaScript
Expressions
to
access
activity
output
by
their
name,
if
you
want
to
instead
of
having
to
use
these
weird
looking
identifiers,
so
there's
that
you
can
of
course
change
the
display
name,
for
example,
or
hello
world,
which
gives
you
a
little.
You
know
a
better
view
of
the
activity,
so
it
it
represents
what
it's
doing.
A
It
has
a
description
which
I
think
is
new
since
I
last
demoed
this
this
studio,
and
it
allows
you
to
give
a
description
about
what
this
activity
is
supposed
to
do.
So,
in
this
case,
it's
going
to
print
the
text
hello
world,
to
the
console,
and
if
you
want
to
you,
can
also
share
this
description
in
the
activity
itself.
So
then
it
becomes
even
more
easier
to
understand
what
the
workflow
is
doing.
A
A
So,
for
example,
if
you
originally
configured
your
workflow
like
this
and
then,
let's
let's
say,
there's
this
Global
setting
to
toggle
descriptions
and
then
suddenly
it
would
look
like
this,
so
there
will
be
some
overlap
and
then
you
need
to
fix
that
and
if
you
don't
want
to
hide
description
again,
then
it's
going
to
look
like
this,
so
might
not
be
ideal.
So
I'm
not
entirely
sure
what
to
do
here,
not
yet
all
right.
So
that's
a
bit
of
changes
on
in
the
activity
property
area.
A
These
are
workflow
definition
properties,
so
you
can
change
the
name,
for
example,
Little
World
console
that
will
be
the
the
name
of
the
workflow.
Some
description
right.
Oh
right,
hey!
Yes,
it's
totally
done
so
activation
strategy.
This
this
already
exists
in
the
stencil
implementation
as
well,
and
it
allows
you
to
configure
a
workflow
to
be
useful
as
a
as
an
activity.
So
if
we
toggle
this
one,
then
we
can
say
for
example:
well
we
can
provide
a
category.
A
Let's
call
this
one
demo
and
when
I
publish
These
Chains
notice
that
we
now
have
a
demo
category
with
the
hello
world
console
activity
which
is
basically
going
to
execute
this
workflow,
but
then
you
can
use
it
in
other
workflows,
auto,
update,
consuming
workflows
when
enabled
will
update
all
workflows
using
this
activity.
Whatever
you
make
it
change
here,
so
that
you
don't
have
to
go
into
each
workflow
individually
and
then
upgrade
its
activity
manually.
A
So
this
will
do
that
automatically
for
you,
but
we're
gonna
enhance
this
in
a
way
by
adding
another
tab
which
shows
you
a
list
of
consuming
workflows
so
that
you
have
precise
control
over
with
consuming
workflow.
You
want
to
update,
because
maybe
some
workflows
you
do
want
to
update
and
immediately
publish
the
changes,
but
maybe
for
others.
You
don't
want
to
do
that.
A
As
you
can
imagine,
the
this
could
potentially
break
a
lot
of
workflows
if
you
made
a
mistake
in
this
active
in
this
workflow
used
as
an
activity,
but
this
is
an
initial
version,
information
about
the
word
for
definition,
so
the
definition
ID
and
the
version
ID
with
its
unique
perversion.
So
here
we
are
at
version
two
one
is
published,
and
so,
if
we
go
back
to
properties
and
I
published
this
one,
nothing
changes
because
we
were
working
on
a
draft.
A
But
it's
a
it's
a
very,
very
early,
beginning
of
of
the
reader,
only
setting
for
workflows,
and
maybe
it
will
be
enhanced
at
some
Port
search.
I
just
reminded
myself.
That
has
yet
to
be
implemented
not
yet
done
Zoom
to
fit
the
screen,
which
will
will
Zoom
the
workflow
in
a
way
so
that
it
it's
on
the
screen.
But
as
you
noticed
when
this
was
here
and
I
press
this
one,
it's
not
entirely
in
the
center
of
this
area,
and
that's
because
of
the
fact
that
this
design
service
actually
extends
to
the
bottom
here.
A
B
A
It's
it's
not
really
centered
in
what
you
can
see.
Sorry
Zoom
to
fit
the
screen,
and
this
is
Center
which
has
the
same
issue
as
you
can
see.
It's
it's
centered
of
this
entire
area,
and
this
is
auto
layout
yet
to
be
implemented,
and
this
will,
if
you
have
multiple
activities,
you
can
choose
to
lay
it
out
horizontally
or
vertically.
So
there's
going
to
be
a
little
drop
down,
error,
auto,
save
I!
Think
it's
new,
since
the
last
demo,
so
autosave
is
enabled
by
default
when
you
use
the
stencil
implementation
of
the
designer.
A
But
here
you
can
turn
it
off.
If
you
don't
want
to
auto,
save
it
so
now
notice
that
when
I,
when
I
make
changes
this
little
save
icon,
con
has
a
small
circle.
That's
currently
occurrence,
which
means
that
there
are
unsafe
changes.
So
this
is
now
a
workflow
that
is
dirty
when
you
click
save
it
becomes
green,
which
means
there
are
no
unsafe
changes.
A
So
it's
it's
all
safely
stored
in
the
database
when
I
move
things
around,
it
becomes
Theory
again,
but
if
you
don't
want
to
you
know,
click
save
continuously,
you
just
toggle
out
of
itself,
and
now
it
will
be
safe
automatically.
So
here
we
have
a
publish
button
which
have
shown
a
few
minutes
ago.
So
if
you
click
this
one,
it
will
publish
current
version
and
here's
a
drop
down
that
lets.
You
unpublish
the
workflow.
So
now
it's
draft,
which
means
it
won't.
A
You
won't
be
able
to
invoke
it
using
the
API
unless
you
specify
specific,
specific
version.
So,
of
course
there
are.
There
are
ways
to
execute
un
unpublished
versions,
but
not
through
the
API
by
default,
if
you
don't
specify
a
version
and
at
the
very
least
it
will
not
be
triggered.
So
if
this
workflow
starts
with
a
trigger
like
a
timer
or
an
ACP
endpoint,
it
will
not
kick
it
and,
of
course
you
can
download
and
upload,
which
is
just
it's.
A
It's
export
and
Import
in
the
other
designer
and
then
a
new
thing
here,
which
we
already
had
in
also
too,
as
an
update
module
here,
it's
enabled
by
default
or
available
just
always
is
to
run
the
workflow
from
the
designer.
So
let
me
show
you
how
that
works
and
before
I
do.
Let
me
make
this
a
few
changes.
So
here
we
have
the
hello
world
and
let's
just
to
make
it
a
little
bit
more
interesting.
Let
me
add
a
small
delay
and,
let's
say
we'll
wait
for
30
seconds
and
then
another
right
line.
Okay.
A
So
now,
let's
test
out
this
workflow,
so
we'll
click
this
button.
If
this
was
successfully
started
notice
that
the
first
activity
now
has
a
green
check
mark
which
means
to
executed
this
one
was
briefly
orange,
which
means
it
was
suspended,
but
only
for
a
few
seconds
and
then
of
course,
the
final
one.
So
it
went
pretty
fast.
So
let
me
run
it
again
and
increase
the
delay
a
little
bit
by
let's
just
use
10
seconds
all
right.
So
now
we
have
some
time
to
look
at
this.
So
you
see
this
one
is
currently
well.
A
It
was
suspended.
This
is
just
showing
the
activity
State.
The
executions
here
we'll
show
the
individual
executions.
So
this
would
the
you
would
have
multiple
executions
if
you
enter
an
activity
multiple
times
or
if
it's
part
of
a
of
a
loop
like
like
a
four
or
for
each
Loop
yeah,
and
then
here
the
final
one
and
and
notice
that
if
you
click
on
an
execution,
you
will
be
able
to
look
at
the
state
of
the
activity
at
that
time.
So
for
just
for
a
better
showcase,
let's
go
to
Fruity
Loops.
A
Let
me
clean
this
up
a
little
bit
so
here
we
have
a
for
each
activity
and
it
is
configured
to
iterate
on
a
array
of
strings,
so
three
fruits
here.
So
it's
going
to
iterate
for
each
of
these
items
for
the
current
value,
I'm
assigning
it
to
the
current
fruit
variable,
which
is
just
the
workflow
variable
you
see
here.
Let
me
delete
this
variable
and
so
in
the
body
you
get
to
configure
what
happens
for
each
iteration.
So
here
we
see
a
breadcrumb
when
we
click
on
root.
A
So
now
we
are
inside
the
body
of
the
four
hits
and
it
has
one
right
line
activity
which
will
print
the
current
fruit.
So
if
we
look
at
the
text
expression
which
is
Javascript,
it
will
print
current
fruits,
colon
and
then
using
this
JavaScript
function
to
get
the
value
of
the
current
fruits
all
right.
So
let's
run
this
one
and
we'll
go
inside
of
this
thing
and
notice.
It's
it
executed
three
times.
That's
so.
A
Instead
of
showing
the
check
mark
If
it
executed
multiple
times,
it
will
show
the
number
of
executions
and
when
we
highlight
the
activity
we
see
on
this
tab,
the
well
activity
details
and
the
latest
state.
So
the
last
state
was
current
through
the
Cherry,
which
was
the
last
item
in
the
in
the
list
that
we
can
see
here.
So
when
we
click
on
for
it's,
we
see
these
were
items
being
iterated
on.
A
So
let's
go
back
here,
select
this
one
and
then
let
let's
take
a
look
at
the
executions
as
of
which
there
are
three
so
the
first
one
printed
current
fruit,
apple,
banana
and
Cherry,
and
on
the
left
here
we
see
the
the
event
log,
so
we
will
see
a
it's.
It's
the
journal
that
displays
all
of
the
events
that
happened
during
a
workflow
execution
and
by
default
it
is
scoped
to
the
current
scope.
A
So
here
we
are
scoped
at
the
to
the
you
know,
for
each
activities
body,
so
we'll
sculpture,
this
container,
which
is
the
flowchart,
and
it
only
has
the
right
line
activity
and
each
activity
will,
at
the
very
least,
immediate
started
event
when
it
started
and
if
it
completes
it
will
also
emit
a
completed
event.
So
we
see
when
it
started
and
when
it
completes
so
two
events
for
this
one
activity,
but
because
it
executed
three
times
in
the
four
hits.
A
We
will
see
six
events
and
for
each
event
we
will
see
Associated
state
of
the
activity
and,
of
course,
some
information
about
the
event
itself,
and
this
will
be
useful.
For
example,
if
there's
a
faulted
event,
and
this
here,
you
would
see
the
exception
details
and
whatever
else
information
is
associated
with
that,
but
speaking
of
defaulted
state
that
has
not
yet
been
implemented.
Yeah
and
when
I
mentioned
this
one,
it's
it's
it.
It
means
when
it's
enabled
it's
called
to
the
current
View.
A
If
I
go
up
one
level,
let's
go
to
this
view
which
the
assess
the
for
each
activity.
So
you
just
see
these
two,
but
if
you
want
to
see
the
full
picture,
or
at
least
the
full
audit
Trail,
then
you
can
disable
this
button
and
then
you
will
see
all
of
the
events,
including
custom
ones.
If,
if
you
have
custom
activities
that
emits
custom
events,
you
will
see
that
as
well.
This
is
just
an
initial
version.
There's
also
I
received
some
feedback
that
you
know.
A
Maybe
it
will
be
useful
to
have
the
ability
to
to
indent,
or
at
least
have
a
view
where
the
child
activities-
let's
say
this
flow
chart
and
its
activities,
that
the
associated
events
are
indented
a
little
bit
so
that
maybe
we
can
use
a
true
view
component
to
reflect
that
hierarchy.
Maybe
we'll
add
it,
but
what
we
will
do
for
sure
in
any
cases
to
to
have
the
ability
to
quickly
filter
through
the
events.
A
So
this
should
probably
be
some
filter
where
you
can
filter
by
event
type
or
even
directly,
on
you
know,
default
on
all
the
faulted
events,
and
then
the
idea
is
that,
no
matter
how
deep
the
hierarchy
in
your
workflow
is,
if
you
have
some
events
that
represents
the
you
know
default
event,
you
should
be
able
to
click
on
it
and
then
it
jumps
directly
to
the
correct
level
in
the
graph
hierarchy
and
scroll
to
the
to
the
faulted
activity
or
whatever
activity
you
click
on
associated
with
the
event
yeah.
So
that's
that's.
A
There
there's
still
a
lot
of
room
for
improvement
there
and
also
based
on
feedback
from
users
as
they
try
this,
and
then
they
see
this
I'm
sure
you
have
some
some
ideas
on
how
to
make
this
more
useful
and
I
would
love
to
hear
all
of
that
compared
to
stencils
simple
station.
This
journal
is
much
better
in
in
terms
of
being
able
to
load
any
number
of
events.
So
let's
say
you
have
a
million
events
in
The
Stance
of
implementation.
A
It
would
try
and
load
a
maximum
of
a
thousand
events,
which
would
not
be
very
useful
because
you
may
want
to
look
at
beyond
the
Thousand
events
here.
There's
an
infinite
scroll,
so
I
paginated
loading,
a
lazy
loading
of
events
as
you
scroll
down.
So,
for
example,
here
so
here
there's
another
word
for
called
slow
steps.
A
It's
a
simple
three-step
workflow,
but
the
second
one
is
Loops
30
times
these
two
activities,
so
it
it
basically
prints
the
current
step
and
then
Waits
a
second,
and
this
is
this-
is
good
to
show
the
event
lock
as
it
grows.
You
can
keep
scrolling
down
and
notice
that
it's
updating
the
status
in
real
time
using
signalr.
So
as
the
workflow
progresses,
it
will
reflect
the
student
state
in
the
in
the
designer.
A
So,
for
example,
here
notice
that
every
second,
this
thing
executes
and
this
one
is
well
continuously
pending,
because
after
this
one
executed,
this
one
executes
and
then
suspense
itself.
But
now
after
30
times
it's
it's
that
because
it
iterated
30
times
as
configured
in
this
four
activity.
And
here
you
can
see
it
states
it
started
from
one
and
then
it
went
from
1
to
30
using
a
stat
value
of
one.
A
Speaking
of
timers,
if
you
look
at
this
icon,
there's
two
modes
to
look
at
the
times
here
by
default,
it
will
show
you
the
the
Delta
time
between
events
and,
of
course,
these
activities
there
very
fast,
so
there's
no
no
time
between
them,
except
for
the
first
delay
which
waits
for
one
second.
So
when
the
delay
activity
started,
it
created
a
bookmark
which
creates
the
suspended
event
and
then
after
one
second,
because
that's
the
timeout
that
was
configured
it
is
resumed.
So
that's
reflected
here
nicely.
A
So
that's
why
you
see
a
Delta
of
one
second
between
these
two.
But
if
you
change
the
view
to
this
one,
which
is
called
show
accumulated
time,
then
it
shows
the
it
accumulates
the
type.
So
it
will
add
up
so
at
this
point
here.
It
is
one
second
and
then
here
another
second
and
then
it
will
increase
so
that
if
you
scroll
all
the
way
down,
you
will
see
the
total
execution
time
which
is
30
seconds,
which
is
what
I
would
have
expected
to
see
here
as
well.
A
But
as
I
mentioned,
I
think
that's
a
little
bug
and
speaking
of
metrics,
you
can
imagine,
maybe
having
a
few
more
tabs
where
you
can
see
some
some
summary
information
of
the
performance
of
the
workflow
instance.
Things
like
that
yeah.
So
here
we
have
the
executions
which
we
talked
about
and
with
pagination,
so
so
campaigns
through
them.
A
If
you
have
many
events
like
here
or
many
executions,
there
will
probably
also
be
an
events
tab
here,
so
that
you
can
also
see
just
the
events
for
the
selected
activity
which
might
be
useful
for
troubleshooting
in
terms
of
UI
I'm,
not
entirely
happy
yet
with
the
with
the
way.
This
looks
right
now
so
now,
when
I
click
on
an
execution,
I
see
the
state
of
of
the
associated
activity,
but
I
don't
really
like
the
layouts.
So
this
might
change
a
little
bit.
Oh
I
think
I
see
what's
going
on
here.
A
So
now
it
says
three
minutes,
so
maybe
that's
the
and
every
time
I
click,
the
UI
update,
so
I
think
it's
directly
set
to
daytime
that
now,
maybe
30
minutes
35
it
was
updated
and
it's
strange
this
should
have
also
shown
finished
so
anyway,
something's
not
entirely
right
there.
My
best.
Can
you
still
hear
me.
B
A
Okay,
cheers,
okay
and
so
variables
is
still
work
in
progress.
So
it
does
show
the
the
variables
of
the
word
for
definition,
but
it
doesn't
show
the
current
value
yet
and
one
enhancement
that
will
be
added
as
well.
It's
not
just
the
ability
to
look
at
the
value
of
the
workflow
instance
of
the
variable
or
given
workflow
instance,
but
also
to
be
able
to
see
the
the
chains
log.
A
So
you
would
be
able
to
see
what
activity
changed
the
value
of
a
gaming
variable
to
its
value,
so
that
you
can
always
see
the
the
mutations.
So
that's
going
to
be
a
good
enhancement
and
the
same
thing
for
input
outputs.
So
you
should
be
able
to
see
what
was
the
actual
input
for
the
workflow
and
what
was
the
final
output.
A
A
Well,
first
of
all,
the
the
little
bugs
that
we
just
discovered
should
be
fixed,
a
certain
missing
functionality
like
the
viewing
the
variable
values
and
the
input
outputs
things
like
that.
That
needs
to
be
fixed
so
that,
that's
you
know,
low
hanging
fruits
so
that,
as
you
gave
to
go
through
that
quickly,
this
one
I
will
probably
disable
for
the
time
being.
So
this
is
the
idea
of
this
environment.
A
Picker
is
to
allow
you
to
switch
between
back-end
workflow
servers
quickly,
so
that
you
can
change
to
stating,
for
example,
and
make
some
changes
there
maybe
go
to
production
and
break
everything
there
or
I
should
say
fix
at
least
try
to
make
some
changes,
but
it
also
requires
a
little
bit
more
thinking
in
terms
of
what
happens
to
the
UI
when
you
switch.
How
does
it
integrate
with
authentication
and
things
like
that?
So
so
it's
it's.
It's
kind
of
a
big
story
still
there
so
I'm,
probably
gonna.
A
This
well
not
add
this
molecule
by
default
for
the
3.0
release
for
security
secrets
and
web
hooks,
probably
the
same
story
so
I'm
probably
gonna
not
show
this
because
right
now,
it's
not
implemented,
and
maybe
it's
not
not
the
best
idea
to
show
it
but
on
in
not
implemented,
might
be
just
confusing
I
think
that's
the
gist
of
it.
But
another
very
important
aspect,
of
course,
which
is
also
the
reason
I
initially
started.
A
The
designer
in
stencil
is
the
ability
to
wrap
the
various
elements
into
Custom
Custom
elements
so
that
you
can
re-host
it
in
your
own
application
and
at
the
time
at
least
not
that
I
was
aware
it
was.
It
was
not
possible
with
blazer
or
at
least
not
very
convenient,
but
for
for
some
time
now
you
can
wrap
your
Blazer
components
into
custom
elements
and
and
with
when
I
learned
about
that.
A
A
So
here
we
have
the
same
dashboard
so,
but
now
it's
running
completely
in
webassembly
and
it
works
pretty
well.
So
that's
awesome,
but
I
wanted
to
show
is
the
another
host
called
custom
elements,
and
the
idea
behind
this
project
is
that
it
will
host
a
bunch
of
high-level
components
that
you
can
embed
in
your
own
application,
and
so
what
are
the
things
you
would
probably
want
to
embed
in
your
own
application?
If
you're
writing
your
own
dashboard
app
is
the
workflow
designer
right.
So
that's
this
part,
so
not
the
menu,
but
the
activity.
A
Picker,
probably
the
designer
itself
and
the
property
panels.
Variable
editor.
Etc,
probably
you
don't
want
to
re-implement
this
yourself,
although
you
could,
because
it's
all
very
modular
even
this,
you
know
all
of
these
things
are
separate
components
that
I
could
potentially
expose,
as
you
know,
a
Lego
block
so
that
you
can
rebuild
it
yourself
as
you
see
fit,
but
for
experimentation
purposes,
I'm,
I'm
thinking
for
the
most
common
scenarios.
You
want
the
entire
editor
plus
property
panels
to
be
able
to
re-host.
A
So
here,
I
have
a
laser
component
called
word
for
definition,
editor,
which
reps
another
component.
That's
used
down
somewhere
here
in
the
modules
workflows,
so
here
there's
also
a
bunch
of
components
that
you
know
that
that
serve
the
the
studio.
But
here
it's
it's!
It's
wrapping
it
this
this
particular
component,
which
is
what
we
are
looking
at
here
yeah.
So
this
is
this.
Is
this
is
so
this
is
a
wrapped
component
and
then
in
program,
I'm
registering
that
component
as
a
custom
element.
So
this
is
this
will
be
the
tag
of
the
custom
element.
A
The
also
Studio
work
for
the
definition
editor
same
bootstrap
code
for
the
required
Services
Etc,
which
is
going
to
be
wrapped
up
in
maybe
some
helper
methods,
so
that
you
don't
have
too
much
repetition
in
your
own
application
setup
and
just
to
try
this
out.
I
updated
the
index.html
of
the
dot
root
folder
here
and
here
I'm,
using
this
custom
elements
and
notice
that
I'm
exposing
the
definition
of
the
E
property
as
an
attribute
of
the
element
in
a
hard
coded
definition.
A
So
when
we
run
this
project
this
one,
so
that's
custom
elements
enter
notice
that
it's
just
it
just
works.
This
is
this:
is
the
custom
element,
so
it's
not
sort
of
a
Blazer
server.
It's
of
course
webassembly.
But
it's
a
custom
element.
That's
you
can
host
in
any
HTML
application,
but
you
do
have
to
reference
the
necessary
style,
seeds,
style
sheets
from
mud,
Blazer
and
some
other
packages
that
I'm
using
including
the
scripts.
But
this
it's
not
too
elegant.
A
If
you
ask
me,
but
at
least
it
works
and
it
can
be
documented
and
I'm.
Con
I
am
looking
into
ways
to
maybe
bundle
all
of
these
assets,
using
some
build
step
into
a
single
resource
that
you
can
then
include
in
your
in
your
own
application,
if
you're
creating
your
own
HTML
app,
but
of
course
most
people
don't
create
vanilla,
HTML
applications
in
vanilla,
JavaScript
many
use,
UI
Frameworks
like
angular,
and
react
and
view.
A
So
it's
very
important
that
you
can
also
use
these
custom
elements
in
those
Frameworks
and
out
of
the
box
that
just
works.
So,
if
you
so,
as
as
a
test
I
created
a
sample
in
this
solution,
so
there
is
Source
samples
and
here's
a
react
solution,
folder,
but
because
it's
it's
a
folder
and
I
didn't
include
the
files
one
by
one
in
this
solution.
I
have
it
open
as
a
separate
writer
window
here
so
here
I
have
one
of
its
subfolders
opens.
A
When
you
publish
a
Blazer
project,
when
you
publish
it,
it
will
create
a
bunch
of
outputs
and
that's
what
you
need
to
include
in
the
public
folder
for
a
react
app
at
least
so
that's
step
one
and
then
of
course,
step
two
is
to
actually
include
those
resources
that
I
just
mentioned
so
the
style
sheets
and
the
scripts,
and
then
in
the
app
you
can
now
just
use
the
custom
element
as
is
and
and
that
just
works.
So
if
we
start
this
one
there
you
go,
this
is
this.
Is
all
in
react?
A
Well,
of
course,
this
entire
thing
is
a
big
custom
element
hosting
a
Blazer
component,
but
you
can
embed
this
in
in
your
react
app,
so
you
could,
on
the
left
hand,
side
you
could
have
your
own
menu.
You
could
have
top
level
menus.
Of
course,
I
don't
have
any
custom
UI,
so
it's
taking
the
full
screen.
So
this
is
currently
just
proof
concept.
A
I
need
to
package
it
up
in
a
convenient
way,
so
you
can
use
it
so
third
thing
I'm
currently
working
on
is
publishing
the
published
output
of
of
this
project
to
a
separate,
folder
and
and
then
so
the
contents
for
the
contents
and
the
framework
contents.
What
I'm
going
to
do
is
packets
it
up
as
an
npm
packets.
A
So
that's
from
your
front
end
application,
for
example,
reacts
here.
You
can
just
reference
the
the
npm
package,
so
so
this
currently
actually
works,
so
this
site
published
through
the
feedsio
preview
feed.
So
this
is
the
packet's
name
else,
I'm
standing,
which
stands
for
webassembly
and
a
post
install
script
that
will
copy
the
content
and
framework
folders
into
the
public
folder
for
you.
B
A
And
as
I
mentioned,
it's
just
a
proof
concept.
I
just
have
the
I
just
took
the
worth
of
definition,
editor
component,
but
we
would
also
need
the
workflow
instance
viewer
components
if
you
want
to
look
at
existing
workflow
instances
and
maybe
break
it
up
in
even
smaller
components
for
people
who
want
more
granularity
in
in
you
know,
composing
their
workflow,
their
own
workflow
application.
So
yeah
I
think
that's
that's.
A
Basically
the
current
status
in
terms
of
timeline,
it's
of
course
always
hard
to
say,
but
I
am
aiming
for
releasing
elsa3,
including
this
Elsa
Studio
end
of
August,
and
it's
not
end
of
August
very
likely
end
of
September
and
then
it
you
know
it
will
be
easy
to
use.
There
will
be
more
documentation
and
some
guides
to
to
get
this
set
up
so
yeah.
What
do
you
think.
B
Looks
great-
and
you
know
you
went
a
long
way
with
this
new
designer-
it's
really
amazing,
especially
like
the
journal,
the
new
Dyna
or
live
Journal,
where
you
can
see
the
the
the
runtime
of
the
workflow.
That
is
something
that
we're
looking
for
for
a
long
time
and
I'm
really
happy
to
see
it
happening
now.
A
Well,
it
updates
the
UI
in
a
certain
state
so
that
you
can
see
the
interaction,
but
here
I
took
a
simpler
approach,
which
is
more
crude
but
also
more
flexible,
and
what
I
mean
by
that
is:
let's
go
to
slow
steps.
Let
me
start
this
one.
So
now
it's
it's
running
right.
It's
as
you
can
see
it's
running,
but
if
we
go
back,
oh
just
go
to
word
for
instances
where
we
see
it's
suspended
any
workflow
instance:
that's
suspended
that
you
open
in
the
viewer
will
update
the
status
in
real
time.
A
Yeah
speaking
of
starting
workflows,
what
I've
got
to
mention
is
what
about
workflows
that
require
input.
You
know,
maybe
you
have
a
customer
ID
that
you
want
to
send
us
an
input
to
a
workflow,
so
you
will
you
you
already,
of
course,
can
declare
word
for
inputs
here
through
the
UI,
and
this
is
also
what
would
allow
you
to
when
you
press
this
button.
Maybe
there's
going
to
be
a
little
drop
down
where
you
can
opt
to
customize
the
input
values.
So
here
you
should
be
able
to
provide
a
default
value.
A
Currently,
there's
no
field
for
that.
But
there
will
be
a
field
where
you
can
provide
a
default
input
value,
and
if
you
then
press
this
button,
it
will
use
that
input
automatically
as
a
default.
Input
with
an
option
to
you
know,
display
a
dialogue
and
overwrite
the
default
values
for
better
testing.
B
A
You,
like
the
journal,
I,
think
visually.
It's
very
pleasing
and
it's
it's
going
to
be
much
better.
Even
with
you
know
the
filtering
capabilities
and
things
like
that
other
enhancements
I
think
you
might
be
interested
in
is
automatic
flowing
of
output
of
one
activity
that
becomes
available
as
input
to
the
next
activity,
especially
for
you
know,
activities
that
that
are
used
for
data
transformation.
A
So
now
what
you
would
have
to
do
is
assign
the
output
of
a
given
activity.
So
in
this
case,
let's
let's
pretend
this
is
like.
If
it
reads
files
doesn't
matter,
you
have
to
create
a
variable
and
then
assign
it
to
that
variable.
So
now
the
output
for
this
activity
is
assigned
to
the
variable
one,
and
then
you
can
use
it
in
subsequent
activities
like
here
here
now,
I
can
say
well,
I
want
to
reference.
The
variable
using
gets
variable
one
intellisense
by
the
way
that's
not
yet
implemented
here.
A
I
need
to
fix
that
but
yeah.
So
this
is
how
you
know
have
to
use
it,
but
one
Improvement
that
has
already
been
made
is,
you
know,
longer
need
to
assign
a
variable
to
the
output.
You
could
just
say
from
this
JavaScript
expression,
you
can
say:
get
bars,
content
from
HTTP
N4.
What
so
these
functions
are
automatically
generated,
based
on
the
outputs
of
a
given
activity
in
the
name
of
a
given
activity.
A
There
will
be
probably
there
will
be
a
new
setting
here
called
automatic
inputs
or
something
like
that-
some
some,
a
better
name
than
what
I
just
said,
but
the
idea
would
be
that
if
you
have
two
activities
where
the
output
of
one
is
compatible
with
the
input
of
another,
especially
well,
if
there's
just
one
output
and
one
input,
then
it
can
automatically
be
connected.
But
the
logic
will
be
extended
a
little
bit
where
it
will
take
the
first
compatible
inputs
to
put
in
the
output
of
the
previous
activity.
A
And
this
way
you
don't
even
have
to
configure
anything,
except
maybe
for
selecting
the
the
value
you
want,
because
it
might
be
a
little
bit
tricky
to
determine
if
you
want
to
use
the
input
automatically
or
if
it.
If
you
need
to
be
explicit
about
it,
I'm
not
entirely
sure
yet,
but
for
now
I'm
gonna
I'm
gonna
I'm,
considering
using
an
explicit
setting.
But
that's
that
will
be
all
so.
You
can
just
select
use
automatic
output
or
input
whatever,
and
then
it's
even
easier.
A
B
A
Yeah
that
would
be
so
great
yeah,
especially
yes,
as
you
mentioned,
you
are,
you
are
looking
for
a
data
transfer
Pipelines,
so
yeah.
Maybe
this
will
be
a
good
good
tool
when
it's
when
it's
finished
speaking
of
finished.
Well,
it's
not
finished
yet,
but
the
packages
are
being
pushed
today
to
the
preview
feed
on
the
feeds
IO.
So
if
you
go
to
well,
if
you
add
this
feed
here,
I
also
have
three.
So
here's
the
defeat.
It's
also
documented.
A
If
you
consume
this
feed,
you
will
see
the
the
studio
packages
as
well,
so
that
you
can
try
them
out
in
your
own
Blazer
application.
All
right,
so
yeah
I'm
gonna
continue
well
I'm
Gonna
Keep
fixing
the
bugs
and
continue
working
a
little
bit
more
on
embedding
in
order
applications
just
to
make
the
packaging
and
the
consumption
of
those
packages
straightforward
and
and
then
gonna
prepare
for
the
release
and
then
Post
Release.
A
The
next
steps
will
be
the
ability
to
manage
workflow
instances
and
it's
more
specifically
to
fix
broken
instances
by
you
know.
Imagine
you
have
a
broker
workflow,
because
there's
a
bug
you,
you
change.
The
workflow
then
publish
a
new
version,
but
now
there
would
be
existing
workplaces
that
you
know
you
may
want
to
upgrade
to
the
newer
version
so
tooling
around
those
scenarios
is
going
to
be
the
next
big
thing.
Post
3.0
release
anyway.
I
could
go
on
and
on
with
the
the
remaining
roadmap.
B
A
I
think
so
too,
I'm
glad
you,
you
agree
and
all
credits
go
to
the
mud,
Blazer
team.
They
did
such
a
great,
really
great
job
with
with
their
component
Library.
All
of
the
design,
I
I
just
had
to
compose
the
components
and
together
and
just
throw
them
on
the
screen,
and
it's
it
just
looks
good
and
it
it
it's
really
incredible
the
productivity
it
gives
mud,
Blazer,
I'm
gonna,
it's
a
really
strong,
strong
component.
Library
did
I
mention
dark
mode.
A
It
does
so
this
is.
This
is
a
default
theme
and
you
can
configure
the
theming
for
dark
mode
and
light
modes.
I
also
expose
it
to
you
as
well.
So
if
you
want,
you
can
change
the
theme
without
having
to
change
the
else
source
code
and
it
does
it
allows
you
to
do
it
in
in
different
ways
and
the
most
easy.
The
easiest
way
is
to
just
change
a
bunch
of
static
properties
on
some
class,
see
if
I
remember
where
it
was
I,
think
maybe
shell,
no
or
probably
Studio
core
about
beam
service.
A
So
here's
beam
service.
So
so
there's
this
thing
here
and
the
default
implementation
great
default
name.
In
any
case,
what
you
can
do
is
you
can
inject
the
I-team
service
and
then
change
the
monthly.
So
so
it
uses
a
mud
theme
which
is
an
object
that
lets
you
configure
all
sorts
of
aspects
like
the
typography
the
palette.
So
this
is
the
dark
mode.
We've
got
the
Dark
theme
palette
and
the
light
screen
palette
primary
colors,
as
you
can
see,
I
already
the
Elsa
studio
theme.
A
The
default
theme
is
already
a
custom
theme,
but
you
can
install
your
own
theme
and
then
it
looks
completely
different
and
that's
your
salary.
Of
course.
This
is
a
modular
application
which
allows
you
to
inject
custom
components
into
various
areas
of
the
system.
So,
for
example,
this
menu-
you
can
Implement
I,
think
it's
called
menu
provider
or
navigation
provider
which
allows
you
to
emit
menu.
Item
objects
that
that
you
can.
A
That
then,
will
be
rendered
automatically,
but
even
custom
components
like
here
so
there's
a
little
placeholder
into
which
you
can
from
your
module,
unobtrusively,
inject
custom
components.
So
this
comes
from
a
module
called
environments
and
it
has
its
own
component
and
that's
being
injected
here
dynamically,
so
also
the
logo.
Currently
it's
not
replaceable,
but
the
logo
is
going
to
be
updatable
so
that
you
can
do
some
white
labeling
and
things
like
that.