Creating a Grid-Based UI in IBM BPM
Key Points
- The demo shows how to create a client‑side Human Service called “Travel Request” in IBM BPM 8570 and add a Travel Request business object variable.
- A new “Start with Grid” option lets you quickly generate a header‑footer grid layout for the coach, which can then be edited using grid‑editing mode.
- Grid editing involves adding cells via the plus icon, resizing them to fit a 12‑column layout, and splitting areas to achieve the desired arrangement of fields.
- After finalizing the grid, fields from the variable palette are dragged into the cells, including destination details and a map view that displays the postal code area.
- The bottom cell of the grid is used to place an OK button, completing the user interface for submitting travel requests.
Full Transcript
# Creating a Grid-Based UI in IBM BPM **Source:** [https://www.youtube.com/watch?v=KkSyPserNy8](https://www.youtube.com/watch?v=KkSyPserNy8) **Duration:** 00:10:37 ## Summary - The demo shows how to create a client‑side Human Service called “Travel Request” in IBM BPM 8570 and add a Travel Request business object variable. - A new “Start with Grid” option lets you quickly generate a header‑footer grid layout for the coach, which can then be edited using grid‑editing mode. - Grid editing involves adding cells via the plus icon, resizing them to fit a 12‑column layout, and splitting areas to achieve the desired arrangement of fields. - After finalizing the grid, fields from the variable palette are dragged into the cells, including destination details and a map view that displays the postal code area. - The bottom cell of the grid is used to place an OK button, completing the user interface for submitting travel requests. ## Sections - [00:00:00](https://www.youtube.com/watch?v=KkSyPserNy8&t=0s) **IBM BPM Grid Layout Demonstration** - The speaker walks through creating a client‑side Human Service for a travel request in IBM BPM 8.5.7, adds a travel request variable, renames the coach, and uses the new “Start with Grid” feature to select and edit a header‑footer grid layout. ## Full Transcript
[Music]
welcome to the IBM BPM 8570
demonstration on grid support in this
demonstration I will create a simple
user interface for requesting travel
within an organization to start with I'm
going to create a client side Human
Service called travel request
to start we're going to add a variable
to capture the information about the
request our variable name will be called
travel
request and the type of that variable
will be the travel request business
object that I created
earlier going to go back to the diagram
tab now and we're going to rename the
default
coach to gather
info Next Step we're going to go to the
coaches tab
we're going to click on gather
info and here you'll see the first
difference compared to previous versions
of
BPM we have a new Option here called
start with
grid this allows you to quickly get
started with a grid on your new coach I
have an idea of what my layout should
look like so I'm going to choose the
header footer starting point for my grid
and click okay once the layout loads you
can see we have three cells within our
layout which can be populated with
content from the pallet although this
grid is a good starting point I want a
different grid for my layout in order to
change the grid I'm going to go into
grid editing mode using these radio
buttons in the top right corner here
content mode allows you to add layout
items to the canvas grid is the mode
used to edit the grid I'm going to click
the grid R button and we can see that
the editor is changed to allow me to
edit the grid I want first name last
name and employee number across the top
so I want to create two more cells to do
this I can just hover over any cell or
container within the grid and click the
plus icon this easily allows me to add a
new cell I will add another
one next I want to resize my cells so
that they're evenly spaced across the
top in order to do this I all I have to
do is hover over the right edge of a
cell as I drag you can see there's a 12
column overlay the available width of
the coach is divided evenly into 12
column all cells are aligned to these 12
columns I'm going to complete the resize
of the
cell and then I'm going to resize the
next cell to be also four columns
wide next I want to split the middle
area into half I will do that using the
same technique clicking the plus icon to
create that new cell I'm going to leave
the bottom cell as is that's going to
hold the buttons within our
coach our grid is now complete and I'm
going to switch to the content view to
populate it
I'm expanding the variables within my
pallet and I'm going to drag and drop
some of the fields into the
grid as I'm dragging you can see that
all cells are highlighted even ones that
have content
already next I'm going to add some of
the fields dealing with the destination
for the request
I'm going to add a map view to the right
of those fields the map is going to show
the postal code area on a
map finally I'm going to drag my okay
button into this bottom
cell and create a companion cancel
button I now have my coach authored with
a grid the last thing to do is to set
the binding on the
map and then
run I will run the client side Human
Service to inspect the coach layout at
runtime if I adjust the width of the
browser we can see the columns within
the grid dynamically
adjust if I make the browser width very
small we can see the layout does not
look very good our next step is going to
be to make the grid responsive to
smaller device sizes to to make our
layout responsive we're going to go back
to the editor and make changes to the
top middle and bottom sections of our
layout to start with we're going to deal
with the top I'm going to go into the
grid editing mode and go to the medium
device size what we want is to have a
little bit more room for each of these
fields in order to do this I'm going to
resize the cells on the medium device
size the horizontal span of the cells
are device
dependent finally switching to the small
device I'm going to set the width of
these cells to to span the entire width
of the
device next we're going to make the
middle section
responsive to start with we're actually
going to change some positioning and
configuration options on the views
themselves on the map Coach View which
is a custom Coach View that I authored I
have a responsive configuration option
for the default map type we're going to
set that to satellite on
large we're also going to set the height
to be 400 pixels because we do have
quite a bit of real estate on a large
device next on the medium size we're
going to change the height to 300
pixels and we're going to configure the
Coach View to be rad by default
lastly we're going to change the
rendering of the is customer travel
field to be a switch on medium and
smaller devices finally on this small
device size we realize we don't have a
lot of real estate at all so what we're
going to do is hide the map completely
on this device to do that we're going to
click on the grid editing mode select
the cell that contains the
map and set it to be hidden on small
devices we can then take the remaining
cell and resize it so it spans the
entire
width we've Now hidden the map on small
devices and given the destination Fields
enough real
estate finally we're going to adjust the
bottom section which contains the
buttons first what we're going to do is
change the layout of the cell cells can
lay out their content both vertically
and horizontally because these are
buttons we're going to lay them out
horizontally
on a large device we want them right
aligned to match the desktop
Paradigm on medium device sizes I want
the buttons to be larger and centered in
order to do this I'm going to change the
alignment the alignment is a responsive
setting as you can see from the icon to
the left of the
field now that we have the button Center
aligned we're going to go to the content
editing mode this will allow us to
change the positioning properties of the
buttons and make them
wider previewing the small device size
we can see our buttons still look decent
and we will leave it as is to complete
our client side Human Service we're
going to add another screen to show the
map when on a small device size to get
to this map we're going to add another
button to our
layout this button is going going to be
called view
map we only want this button to appear
on small device sizes so we'll go to the
visibility we'll set it to be required
on the small size switch to
large and set its visibility To
None on the
diagram we're going to add a new coach
to view the map
and I will wire it to the button I just
created When selecting view map we're
given the same dialogue in this case
we're not going to use a grid because
it's going to be a very simple
coach we'll create a instance of the map
Coach View bind it to the postal
code set its height to be 400 pixel pixs
and that completes this coach let's run
the client side Human Service to see the
final
Behavior we can see on large first name
last name employee number each share a
third of the horizontal space across the
top is customer travel is a
checkbox our map is Satellite by default
and the okay and cancel buttons are
right aligned if we adjust the browser
width to medium size we can see that
first name last name employee number are
all 50% of the browser with with
employee number flowing onto the next
line the okay and cancel buttons are now
larger and aligned to the center
customer travel is now a switch and our
map is road by
default if I make the browser width even
smaller we are not the small device
setting the map is completely hidden all
of our fields are now spanning the
entire device width which would be very
useful on a device such as a phone if I
click the view map button we are taken
to another screen with the map
showing and that concludes the
demonstration grid support is a simple
and intuitive way of laying out the root
content in your coach and Coach views
which is both lightweight and responsive
at runtime thank you
n
[Music]