Alpha Anywhere Webcast 2020 Jan 22 - ControlBar Menus & Extended User Security w/ Dion, Dave & Sarah



Alpha Anywhere Webcast 2020 Jan 22 - ControlBar Menus & Extended User Security w/ Dion, Dave & Sarah

Sarah Shows Xbasic Guide (6:13)
Dion's Overview (8:10)
Down Menus in the ControlBar (9:17)
Dion builds UX with Drop Down Menus (10:27)
Using the ControlBar Builder (12:27)
Dion Fills Menu Data with Tree Builder Genie (16:23)
Include Icons (17:28)
Seeing the Menu in JSON Data Format (18:47)
Menu as Xbasic Array (19:17)
Defining ControlBar Layout (20:09)
Checking Our Progress in Working Preview (21:57)
Displaying Menu from Cascading to Expanding (24:31)
Adding a Second Menu (25:39)
Building Menu from an Xbasic Function (26:01)
Adding Second Menu to ControlBar Layout (27:57)
Refreshing Menu Data (30:07)
Q&A: When you have a cascading menu, can you change the arrow direction? (31:40)
Q&A: Could you use a UX without Panels? (33:43)
What is Extended User Security Info (34:14)
Demonstrating Extended User Security Info(37:28)
How to build it (40:20)
Changing Style (43:45)
Connecting UX to Data in Data Binding Section (44:44)
OnDialogInitialize in Server-side Events (48:30)
afterDialogValidate (50:04)
Q&A: Could you write a script that would add a User and a Role at the same time? (56:43)
Q&A: Is there a way to secure/encrypt columns in the table ?(59:01)


--- LINKS ---
Xbasic Guide:
https://www.alphasoftware.com/hubfs/AlphaAnywhereXbasicGuide.pdf

Registration for weekly invites to Alpha Anywhere Demo and Q&A Webcasts:
https://www.alphasoftware.com/weekly-alpha-anywhere-overview-webinar


If you have further questions please send them to guides@alphasoftware.com


Alpha Software development environments, Alpha Anywhere and Alpha TransForm, enable data collection, digital transformation, field service applications, field automation, work order dispatch, resource management, reporting & analysis, and more.

Come learn more about the best development solution online or offline for desktop, web, or mobile devices. Visit us at https://www.alphasoftware.com/

#lowcode #digitaltransformation #datacollection #mobileapps #fieldservice #inspection #offline

Transcript

hello and welcome to the Alfa anywhere

demo and QA webcast I'm Dave McCormack

VP of products and services here at

alpha software and I'm pleased to

present Dion McCormick our lead

solutions engineer also no relation

today Deanna is gonna be going over

actually something that a someone had

written in for a question that someone

had written in but he's also here to

answer your questions as well as he

demonstrates alpha anywhere so if you do

have questions go ahead and type them in

to the questions box of the GoToWebinar

control panel also joining us today is

Sarah Mitchell I believe if I can find

her online if not I could find her in a

minute and she is here to answer your

questions as well and she will she's in

charge of our documentation department

but she's also here to announce the and

present a new link to the Alpha anywhere

X basic guide which just came out so

let's get started hello DN are you there

yes I am mm-hmm excuse me sure

thank you there we go frog in the throat

little wet and chilly out there it is

but actually it's a positive thing I

live in the Austin area and if anybody's

been in this area we have something

called cedar fever where all the cedar

trees start pollinating and so it's

literally like one of these dust clouds

you see in the Sahara Desert is

basically what this area becomes so when

a little rain comes along and just pulls

that out of the air so it's like good

news bad news like anything out there

but hey welcome everybody little tidbit

there for you and Dave thank you very

much for the introduction we always

appreciate your attendance and your

being with us and more importantly your

questions so today I have different

eyebrows okay I'm getting some echo as

well Sarah I believe that's you who just

who did just join us well yes quite the

entrance so today I've got two demos

that came in off of questions both on

previous but also through guides and I

really appreciate people taking the time

to do that allows me to prepare a few or

less uncontrolled crashes in the ground

when I have a little time but also we're

here for any other questions so make

sure you go

the gotowebinar can questions area of

your control piano and put any questions

that you have and remember we do post

these to our video feeds so when you

want you know we have replays of these

you can go back and watch them and

they're really really a rich set of

information for you to tap into so

before I want to go through that though

I want to introduce Sarah who released

this week something I think is

absolutely fantastic which is the X

basic guide this is a printed user kind

of guide and it's just really a super

powerful tool to have available and I've

talked to a number of people that

literally like the moment they got it

they print it out and it's sitting on

their desktop because it's a great quick

reference guide if you're trying to do

something in our X basic language and

you just pop it open it's really

well-structured so it's easy to find

what you're looking for there's great

examples in there and it's available

both in a PDF format you can print it

but you can also display that PDF on the

screen but we will be updating it or

rather I shouldn't use the wee word

Sarah will be updating that as well

Kourt yeah go ahead I sought to say the

Royal we will be updating it yes yes

exactly

and you know it's a living document and

actually has some great input and great

feedback from our users which we always

appreciate that's already been

incorporated in the PDF document so I'm

gonna bring Sarah on I'm gonna transfer

it over to her and she's gonna talk

about where you can go get the latest

and greatest version of the X basic user

guide all right Sarah are you there or

maybe is fighting the plague I don't

think it's the Chinese wine I think it's

the corona virus from it's something

like northeastern variant of it or

something like that

not funny man oh did she have expire oh

wow it's a brutal virus that's a really

fast fast acting too bad

I know I was

it wasn't the middle of a thought when

you asked me to that's trying to finish

it up real quick yeah thank you no more

thinking anyway oh yeah there's been

some revisions

I wouldn't put an extra special thank

you out there to Ron who has been a

phenomenal wonderful person who's given

me and because of his enthusiasm for

this new document it's it's got some

great new updates in it I'm gonna go the

link for that pray here only just find

it'll cook and if you want to put that

in the chat window that would be awesome

I will put that in the chat window and

it's it's the same link as last as last

week same link under document yeah it's

just been updated and I don't know if

you asked me to share my screen or not

no I think just the link should be

enough unless there's something in

particular you'd like to show well I

would like to show it all right let's do

it I'm gonna go ahead make you the

presenter then divorce me to talk member

the office and make them go on first all

right let me see if I can be okay yeah I

thought it is I unfortunately I've got

like the concept above your opening

there we go

okay and this is people can see your

screen click to stop sharing yep you see

my screen yep

I mean a big goof too but it's all been

updated and fixed I definitely download

this it's accurate now I apologize for

those mistakes are made but I make said

about this we've made some changes to

and it came as suggestions like adding

section numbering so people can exchange

information more easily concise is all

appeared available then I definitely

liked download this and it is going to

be where I am planning to also post them

out on our blog and integrate all this

into the elf anywhere documentation

system there's been a little bit of a

little bit larger text have to happen

there so I can get content in there but

that's the the PDF will always be

available and will always sure to make

sure it's up to date so go ahead and

grab that it's it's Debbie Debbie Debbie

Elvis AFRICOM slash hub FS / alpha

anywhere X basic guide in camel case not

PDF dot PDF in the chat window are

watching it recording yeah and this link

will also be available in the comments

on our YouTube video the link is also

available in the cop in the description

not the comment of the last week's

webinar as well so great well make sure

you guys have this resource make it

easily find a little thanks very much

outstanding and you can bookmark that

exactly and as we make updates it will

always be in that great location all

right so I'm gonna sure to back over to

you Dion

yes you got it in fact we're gonna use a

little X basic today we're gonna use

some X basic and if I recall you're

going over the use of the security

system is that right and they extended

use we're doing something else so I'm

gonna do two things and one they're kind

of different animals one is I want to

follow up on the control bar which is

one of the most powerful controls in our

Arsenal and specifically the ability to

use what are called drop-down menus in

the control bar which was just recently

added which really makes life for

something nice it's very cool it's

simplified the building of control Lars

but what I want to show you today is how

powerful it can be I'm

is going to talk a little bit about

access control ie security we had a

question last week of a person saying

hey well how do you use the built-in

template for adding a user to the

security environment and at the same

time adding that user to the secure I'm

sorry - security and also the extended

user information table and it's really

not too bad there's a few steps needing

to go through but once you have that

you'll be in great shape so what I'd

like to do is just run through the

control bar one first and then we'll go

there so let me get my system set up so

bear with me okay

and we're here okay so let me go and

show the demo first so I'm gonna go

ahead and show you the working preview

here and you'll see I have a very

straightforward control bar here it's

got a menu over here on the left a piece

of static text or right now but this

will be a button and then a menu on the

right and I drop down and you've got a

nice-looking little menu this is the you

know just using one of our built-in

styles but you can see you know it has

all the highlighting and it has the

ability to do multi-level menu items and

things like that

so very flexible and you know you can

put a lot of content in here and it is

style and then on the right hand side we

have another menu here now ignore that

little icon but you can see similar

thing you have basically a drop-down

with multi levels of menu that is

available that you want to do now they

basically to a certain degree look the

same they operate the same they have not

the same content but the reality is how

they're rendered is very very different

so I'm gonna run through that really

quickly here so I'm gonna start from

scratch just so we can see it you know

kind of make sure that people understand

the steps and how you go from there so

I'm just creating a new UX and for blue

our new this is basically your form

building capability within alpha as

always I like to start using panels and

so I'm going to include a panel card and

then I'm going to Cle click here and say

panel header now when I click panel

header which is a area that's always

going to be at the top of my panel cards

so no matter what

orientation my panel cards at it's going

to be at the top so I want to add that

panel header and you'll notice when I do

so it asks me well would you like to

include a control bar because that's the

natural place to have a control bar in

my case yeah go ahead and just create

that for me

so now I have a panel card I have a

panel header with a control bar there

I'm just gonna drop in some static text

in here

and let's look and see what it looks

like well right now it's not gonna look

like a whole lot of nothing because our

control bar is empty so you can see I'm

getting a message oh I haven't defined

that no big deal but you can see here's

my content here but you'll notice this

is where my control bar is gonna live up

here in the panel header and if I go

through and let's say I do a mobile

orientation the cool thing about as that

panel header will always be at the top

so you notice it's at the top of my

thing and if I scroll it and stuff like

that if I go ahead and say you know what

I'm gonna make this horizontal you'll

see that the control bar and more

importantly the panel header extends to

the width of the current screen whether

it's small or its large it automatically

does that so the control bar and the

panel header are what I would call

responsive in nature so they're very

very handy so let's go ahead and save

this and I'll go ahead and put there and

this is all gonna be static so I'll if

you're interested in getting this after

we're done as always just send an email

the guides at alpha software.com

and we will send that out to you so

right now my control bar is empty so I

need to go into my control bar and

actually define some content there so I

double click on it or there is a control

bar properties actually there to open up

my control bar now kind of nice is there

some control bar templates I'm gonna

start from scratch but you don't have to

and more importantly once you get a nice

control bar that you really like you can

save it as a template and restore it at

any time and that's kind of a constant

capability with an alpha is that we want

to save you time once you've done

something once you're probably gonna

reuse it or reuse something very closely

to it so you can do that here but I'm

gonna go ahead and manually through it

so the key things I'm going to do our

items control bar layout for this that's

really all I'm going to

Kisan today there are a lot of other

features the control bar we've done

guides before actually if you go right

here you'll see that we have the control

bar user guide documentation that is put

together by our is truly Sarah here and

it's phenomenal you click on that it's

gonna open it up it's gonna have a lot

more data to it so but I want to go to

items because control bar is made up of

items and easy and see now I don't have

any items so I'm gonna add my first item

here and I'm just gonna put in HTML and

that is gonna be a piece of static HTML

now I say static but it can be

data-driven so let me go ahead and do

this hold on one second maybe I'm

getting the plague my voice is starting

a little croaky so it's got I'm just

gonna say I'm gonna go here it's called

HTML one but I'm gonna go here to the

text I'm gonna say webinar demo ok so

I've created our piece of HTML but I

also want to add that drop down menu so

I'm gonna go ahead and here and click

add control bar item so as you can see

I'm kind of creating the little elements

that are gonna go into my control bar so

in this case we have a new feature

called the button - drop-down menu now

what's cool is that we've always had the

disclosure button and a disclosure is

basically an area that will show up on

demand it's like a window concept but it

was kind of lot more work to put it

together and there are a couple

different ways to do it it got simpler

but in the end a lot of people were just

saying hey you know what I just want a

menu that's all I want I don't want to

mess with anything I want a menu and so

this feature was added by our

development team so I click here it

creates my drop-down menu I can go ahead

and put the text here for what it is now

this is a button so I can make it text

or I could make it by text followed by

an image or in this case I'm gonna go

image only and now that I've selected

this button to be an image that's the

button is how it's going to be activated

I can go into the icon here you go to

the SVG icons which is the ones I want

to use and I encourage you use those and

I've got a little you know classic

hamburger menu structure here now your

forced to use this you can use any ME me

icon you so choose so you get to choose

and decide what it is but that's what

I'm going to use for this demo here okay

so now I've created my HTML and my drop

down menu now I'm ready to actually

define what my menu looks like so you'll

see when I'm clicking on button drop

down menu on the right hand side we have

menu definition so I'm gonna go ahead

and open that and it actually builds up

a sub sort of panel or control panel so

I've got two types of minis cascading

and expanding and you can play with

those they just operate a little

differently and it's really up to you

cascading is kind of add you know kind

of a stair-step concept expanding kind

of stays within one column and you can

kind of choose what's best for your

particular situation I'm gonna go ahead

and use cascading for now now for the

method for defining the menu I have the

built in menu builder you can actually

use three ways to do this menu build a

static JSON string or X basic function

so I'm gonna keep menu builder here now

what I'm gonna do is I'm gonna go ahead

and modify this menu here by clicking

here and you'll see it opens up my tree

data genie and I can start building my

menu here so I can go item one item

let's do this little more interesting

home settings other actually you know

what settings will go connection storage

yada yada and then we'll also add a last

one here which is logout something like

that so this is just my structure now

you notice how I'm doing this is I'm

actually just typing it in and I'm

putting a tab B to indent this so that

I'm basically building the structure of

my menu here and I click OK now once

I've done there it now shows me more of

a realistic of okay you've got like a

tree menu set up where you have a home

here and again you can go down as many

layers as you want you can add sub

Child's below that etc you can modify

them move them around

delete them you know from there now for

home I'm gonna go ahead and say you know

what let's go ahead and include an eye

so I'm gonna click here on the icon go

to my SVG icons and then just type in

home is where I want to be home on the

range and so you can add icons to each

of these items here

let's go Storch let's just forget goals

we'll do that and we'll go here and SVG

let's try disk now storage Wow let's

just grab something that was probably

not going to - - ah grab that okay just

for fun

now really important you can go ahead

and add in here on click events I'm not

gonna add them now but that's where you

would trigger say action JavaScript or

your own JavaScript or pieces there

along with that also you can define

security groups which say hey you know

what if you're an administrator you can

see this item in anything below it if

not you can't see it so you can actually

enable those security groups and use the

built-in ones and then last but not

least as you can use show/hide

expressions where you can actually

server-side say look at a session

variable and say oh if it's set here

don't show them these menu items so

there's some really nice ways to

customize the behaviors of this menu on

the fly using security groups and showed

high expressions now once I built this

menu check this out let me go ahead and

show you the JSON data so this is the

JSON data that defines the menu and it

you know may look a little confused and

begin with but you'll see that it's an

array of JSON objects you have your

first one here and then I have my second

one here but in and then my third one

here so those are my top level items but

you'll notice my second one I now have

children showing those three there and

then I could add another layer another

layer so the nice thing about is once

you've built herminia and copy this and

use it now the other is you can look and

see it this as an X basic array and this

is kind of a little bit more but this is

showing how you could basically build

this exact menu using X basic and so you

can see it's creating a you know it's a

it's basically a ray of items here with

the first etc and you can look at it

it's a little hard to understand up top

but you key there's some built-in

functions that are really nice on how to

use that so you don't necessarily have

to do it

but if you do you're welcome to do that

so now I've built my menu and then I

could modify the properties of it I

could add a pointer icon I could create

what my width of it is my height etc I

can also tell me whether it should be

animated or just pop-up it's really up

to you to do everything you need to do

so I'm gonna go ahead and click OK now

on my control bar here I've defined my

items but I have not necessarily told it

how to lay it out on the control bar up

top so now I need to go over here to

this tab called control bar layout and

now I'm in my control bar laya and you

can see I can have multiple layouts and

I actually don't have any yet so I'm

gonna go ahead and click here to add a

layout and it's just got me to call this

actually I like to call it default

layout and click OK but you can name it

anything you want you can also have when

you have multiple layouts you can

actually define which one's the default

layout which means when the control bar

is first rendered it will show that

particular layout and what's neat is you

can create multiple layouts and

on-the-fly just say hey control bar show

this layout show this layout so if I'm

on the home page show this layout when

I'm on editing record show this layout

if I'm on a list show this very flexible

so you'll see over on the right hand

then now I have my ability to do layout

definition so I can click here and add a

line there's no lines here and then I'm

gonna go ahead and add on the left I'm

gonna go ahead and put 4 now I'm gonna

put my static text over on the left hand

side in the middle and after I'm gonna

put my drop-down menu on the map tur now

this is very important with this

nomenclature notice it says before

middle and after it doesn't say left

middle and right because if you are

creating control bar that's vertical you

might have top middle and bottom so the

idea is you know it's more contextually

a the ability for use this in many

different scenarios that you may want to

choose in your application so again left

menu middle and I'm sorry before middle

after is like left middle and right ok

so now we have our control bar it would

render here I have noticed this

rendering you know it doesn't always be

very good but we can go ahead and click

OK and now I can save this so now

go into my working preview and you know

what I have to do one thing I have to

report this that you have to go in and

this is a little thing I found I have to

pre-render now this is just something I

think it's a a release issue is that

you'll notice here and if I go into

working preview by the way I'm gonna

just copy this and send it over to

development as a bug report with a

sample which is I highly recommend if

you sit in a buck report create a little

video describe what it is

give them an example be great but notice

I'm clicking on your nothing's happening

if I go in pre-render and save this it's

gonna pre-render the component I think

there's just two somewhere it needs to

pre render it before it actually gets

seen what's going on oh I'm an idiot

here's my menu so maybe you don't need a

prerunner I'll go test that later so

don't take that with a big grain of salt

like the size of a boulder so you can

see now I've got my menu over here and I

have settings home so this is the

cascading so it's kind of popping out

here if I do it over here actually I'll

show you that it will it knows where the

side of the screen is so and if I had

set items like you know I could click on

these and then they would trigger those

trigger men if there so you can see it's

very simple to create nice looking very

fluid these are beautiful menus they

work out really nicely in fact let's go

ahead and go ahead and go to controls to

mobile let's do a working preview here

and show you what it looks like here in

a mobile it's all nicely saying oh it

just shows outside there must be a see

here up it shouldn't show there should

say inside there so I'll play with that

a little bit more so now I can go in if

I need to change this menu I can go into

the menu or into the control bar go to

my items and then go into my menu

definition and I can modify this to my

heart's desire it say oh you know what I

want this to be up one level I want

connection to have a different icon that

connection icon is something like this

let's see and boom now that I've done

that

save it I've got my working preview I

can then see my menu operating let me

take it out of mobile and we'll go from

here

and you'll see now I've got my new menu

item with the different items there and

as I mentioned earlier if I'm not sure

I'd like that style let's do a couple

things one is I'm going to change the

style this menu from a cascading to a

expanding menu changes some of the

parameters there the other thing I was

going to go to my control bar layout and

I'm going to edit this line right here

so I want to change it and I actually

want to go ahead and delete these items

here and in this case what I want to

have is my drop-down menu on the left

and my icon on our my text over here so

let's go ahead and look at what that

does and we'll do a working preview so

you'll see over here there's some a

static text on the right-hand side and

now my menu shows up here now notice my

menu style here since I've selected the

expanding instead of popping out on the

right it expands and this could be on a

mobile device may be more valuable

because then it will expand below the

item so you can pick and choose what you

want to you know how you want to

implement your menu so that's the intro

but let's take it for the next level

because it's always fun to take it to

the next level so what I'm gonna do is

I'm gonna go back to my control bar and

I'm gonna add another menu in this and

I'm gonna go ahead and go back to my

items remember I can't add anything

until it's actually in the control bar

so I'm going to add another one here and

I'm selecting button drop-down menu and

it renames it automatically ok so I'm

gonna go into the menu definition I'll

go ahead and select it as expanding but

now instead of menu builder what I'm

gonna do is select X basic function okay

so now I'm going to instead of loading

this statically I'm gonna use the next

basic function so I'm gonna go ahead and

I'm gonna go load our menu content is

what I'm gonna call it so what I did

here is I clicked on this X baseline

because it's saying well we're going to

get this data so we're gonna use menu

content so what's nice is I can show a

sample

function and this has sample items and

so I can copy this and then I can go to

my definitions here and paste it here

that's it so now what's gonna happen is

I have a menu that is going to be on the

fly when it renders its going to run

this X basic function that I define

called menu content and that is what's

going to deliver the content to the menu

versus the other one where I defined it

statically so I'm gonna go ahead and

click OK now the reality is I mean to

now go over here to X basic functions

because I created the prototype but

let's check and make sure it looks good

so it gives you a lot of instructions

first it shows you let's say you want to

have an a menu that looks like this well

one way is to create an X basic array

which is very handy because then it's

kind of programmatic the other method is

you can actually just use a text

representation and a special built-in

function so I'm gonna go ahead and use

that one for now so I'm just uncoming

basically we create a piece of text we

load it with a textual representation of

our menu you'll notice we have alpha and

sub alpha beta etc and in there you can

click all this pieces here and as you

can see that's kind of nice if I'm just

putting in some standard there but you

know it up to you and then you'll notice

that my JSON definition is basically a

built in function that converts this

text into what I need and then I deliver

that back to the function that goes to

the control bar and the control bar

renders it so click Save but I have to

do one more thing and I remember I

forgot that I'm gonna go back into my

control bar well I've created my three

items but guess what

it's missing from the control bar layout

you can see I've got that so let's go

ahead and add a well first I'm gonna go

back here on this and it's just uh I'll

just make it a button and I'll call it

click me there you go and I'll go back

to my control bar layout I'm gonna edit

this line right here and let's go ahead

and add my new menu here into the center

of it so my left will be my hard-coded

menu then one will be there so let's go

ahead and click there and click go there

and save and wallah if everything is

works

we have our traditional menu here that

we did before got my static and here is

my click menu and you'll see it has all

the functionality you need etc these

icons are not showing up so I'd have to

make sure they in my environment they're

resolving correctly but you conclude

icons and other pieces here but you'll

notice that before this menu was

generated it ran this X basic function

now why is that important well I can

then in any way shape or form tailor my

menu construction based upon session

information who's logged in it really

just opens up enormous amount of

opportunities for you to customize your

menu plus if you ever have to modify

your menu it could literally pick a list

of menu items out of a database table

and build it on the fly so you can start

going to self-maintained kind of systems

or like a user can say hey I'm gonna put

on there my my personal favorites or hey

that's a great idea let's say someone is

editing about records and I love

salesforce does this i don't know if

you've seen the Salesforce CRM but it

remembers the last few things you've

worked with like and so what happens is

if you once you click on and look at a

record it kind of remembers oh yeah you

looked at because often you're gonna go

back and revisit that within a short

period of time so you could create the

same thing where as you go through you

could throw into a session variable the

most recent things you hit and then boom

you could render that when you render

the menu with that information now I'm

gonna come back at our next session and

what I want to show you which is really

cool is that there is a new capability

and I didn't have time to put this

together but I'm gonna say refresh and I

just wanted to do some checking and I

have something else to do in terms of

today for dupes let's go ahead and put

the text in there properly spelling is

our friend okay well there's a cool new

action that was just added recently

which allows you to refresh the control

bar menu data so let's say that scenario

where I go and open up a record and I

want to kind of put that onto the stack

as the most recently refreshed

well now I have the ability to trigger

this and after I've updated say my

session variable with that opening

record then I can go ahead and just tell

the menu to refresh itself it's going to

rerun that X basic call and then refresh

the data so it's really cool because

this allows you to just as you're moving

through it

keep that menu refreshed with whatever

content you would like from there so

that's a quick introduction I'm gonna go

ahead and come back and show you that

example next time but I just want to

kind of open that up for now so that is

the control bar menu I think we open it

up for a few questions but then I need

to jump in and do the security one

because that was asked by another

individual that sounds good um let's see

if we can find something here okay

here's a good one when you have a

cascading menu if you have it afterwards

can you have the arrow soar that greater

than symbol point to the left instead of

to the right so for example if you're on

the right side of the screen it might

make sense for Tchaikovsky ah that's a

good point

um I don't know about that but you can

go here and send a enhancement request

and that would be a great enhancement

because I agree with you in if you're on

the right-hand side of the screen if you

have like an arrow going the wrong

direction it doesn't make a lot of sense

so be interesting how you would approach

that I will look at that there may be a

way to do it on the fly you would have

to do it on the fly because you have to

look at the where or well when you build

them in you you kind of know which side

of the screen you're gonna be on so I

guess you couldn't replace but I wonder

how you replace that let me look at

something real quick I'm gonna go in

here alright yep and we'll go to items

we'll go to this one right here let's go

ahead and go into the menu definition I

don't see where you can define the

direction oh wait what's cascading yep

you know see menu point her position the

most edges automatically selected okay

yeah this pointer icon is sort of like

we would try

down from the the item you click on

right so we can check around on that but

that makes a lot of sense because you

know from a user it's like well it's

pointing in the right direction might

bother him get him bugged actually if

they do complain about that you can say

you have way too much time on your hands

and there are a lot more important

things you really should be focusing on

wishful thinking on my part Russian

system it works this way and that's how

it's going to exactly be customer is

always wrong yeah you've put together in

this particular example you put a panel

header and a panel cards and all that

and the question is just generally

speaking can you use a UX without panels

can you just use containers for example

absolutely ok no requirement at all

alright great that was the question

leave so that's it and the next question

is the is actually the one that from

last week so we can jump right into the

okay cool yeah and I want to make sure

it'll take a little bit here so the

question from our loyal reader in Fort

Lee New Jersey was a regarding security

remember that yeah they did a similar

Litella

so I'm gonna jump down here to my

security areas ok so the question was

this alpha has a number of pre-built

security user interfaces specifically

around creating users within the

security now in the last year we've

introduced what's called the extended

user information table because often the

security system is trapping username and

password and then groups sort of like

what their permissions are but we found

that everybody was sort of expanding

that to include a whole bunch of other

profile data phone number email first

name last name

you know the whole wealth of things and

so what happened was the development

team said you know everybody's kind of

do it let's give them some structure to

do it and so now within your project you

can define what's called the where is it

extended user secure

info and basically all this is is a

table within your database that holds

information that you want to associate

and it has what's called the user ID

field which is the user ID that's going

to match the security system so now you

have essentially two stores of data you

have the security environment and then

you have the extended user information

environment which is just a database

table but the nice thing is that when

you've defined the linkage then alpha

knows when the person logs in they know

what that login user ID is it knows how

to go to that table and look up that

information and what's really valuable

is built into our grid and other things

you can actually fill arguments that are

used for filtering stuff directly from

that table so it takes away a lot of

steps often what you did when you logged

in is load up a bunch of session

variables and then refer them later you

can get rid of all that management to

make life easier but the flipside is

when you create a user you now need to

be able to create a user both in the

security environment and also in the

extended user information table it's

kind of extended user information is for

you know I guess the regular table which

you can't access directly if I'm to

understand has the username and password

and email but the extended one would

have you know maybe account numbers or

preferences preferred language or

currency or things like that absolutely

and you can you can modify that table

all you want you can look at it you know

in this case here's the default ones

that are in my table I have to define

which ones the user ID but the sky's the

limit

you can use anything you want for your

particular business requirement cool so

let me go ahead and say this let me go

ahead and publish all this and I'm going

to show you an operation then we'll come

back and show you so I built a little

example application something very

simple that basically had a login page

and then it logged in there so and if I

can remember my users I shall come in

and cheat okay

very simple and I've just got a log in

here so first I'm gonna go back in here

and show you what user groups we have so

you'll see we have three we have two

user groups administrators and users and

now right now I have three administrator

John Doe and user so now what I'm going

to do is first I'm gonna log in as the

administrator alpha and then I'm gonna

go here and click password okay and

login and that's really high security so

so this what I'm now logging in as the

administrator so as the administrator I

have this ability to create a new user

so I've got a UX device our UX form here

which I'll show you how to build in a

few minutes very simple I'm gonna put in

the future a few pieces of data so I'm

gonna put Jane Doe and they're at eight

hundred five five five one two one two

now this is extended user information

this means this is not going to be

stored in the security information or

security tables it's actually going to

be stored in my user extended info table

here now I have to put in let's go ahead

and put in Jane Doe at Alpha soft or

I'll just go Gmail make it shorter yeah

I'm gonna put in a password and a

password and once I've done I click the

submit button and what it's going to do

is take this information and this

information and insert it into the

separate systems and so now I have a

user that's available within the system

now behind the scenes I'm also setting

Jane's

sort of their people and now this didn't

give me a message but I probably put a

little message I put this together very

quickly just do it so let's go ahead and

we're gonna go ahead and log out and I'm

just gonna go ahead and put in Jane Doe

at gmail.com password and oh not gonna

say dotto or did I wonder do Jane Doe

let me look at here or is it just plain

let's just change I put Jane Doe I'm

Peter

Jane Doe at gmail.com

there we go and I'm logging in and

you'll notice when I log in it actually

knows it you know I'm back to here now I

would probably hide this from the user

so I'd go into my tabbed UI here for

instance here and I would go to controls

I go here and I'd go into the security

groups and I would say only

administrators can create this new user

and extended so once I've done that now

when I log in as a user I wouldn't see

it here but as an administrator I so

what I want to do is show you now and

since I've already got it here to show

you how I built this and integrate it

into it so first step was when I built

this project I did two things first I

enabled the web security system and I

created some groups you know and

administrators and users and again those

can be anything you want from there also

along with that I created a sample user

administrator because I needed that just

for testing and other pieces there now

the second thing I did is I went to the

project properties I scroll down until I

found the extended user information

table and then I defined this

information I told it which connections

string to use what table to use and then

what is the field that's going to be the

field that links the security system to

that and you can rename it anything you

want but that is the sort of the ID of

what the person logs in now one thing

that's you right there sure please do

and ask you a little question about that

table so now that's a table that you're

gonna need to set up yourself like on

RDS or MySQL or sequel or something like

that right well it's in a database so

it's going to be in your database but

what is your gain yeah

it's once you've defined the connection

string and typed in the name you can

actually click this little blue box

leg here and it will auto-generate that

table for you a little build it for you

once it does yeah very so you'll see

here at let me show you how I did is

that I said okay great I typed in the

name of the table so you know you don't

have to use that I could call this users

it doesn't really matter but now I go

here now you'll notice here that it's

got a special syntax to define how these

items are so you go default feel list or

stuff you can modify that this is not

meant to be a database editor what's

nice too is once you've built this table

you can go in and use your regular

database tools to modify it add files

etc because the system smart enough to

look at all the fields that are in that

table whether they were there to begin

when the person logs in and you asked

for that information alpha goes and

inspects that table and says oh there's

20 fields so I'm gonna go ahead and have

those available to the user and once

I've done that I click OK it will

generate a table in my database with

that name with that information then I

define which is the link field and again

you can change annotate text you want

and then now you have connected the

Alpha project to that table and

therefore all the functions around alpha

automatically looking up that data are

now enabled so a great question cool

excellent thanks okay so now I want to

go ahead and create my tool for creating

a new person well the cool thing again

is I go here to new web component UX and

you'll notice that there's a whole bunch

of security framework pre-built you X's

and voila there's one called security

framework - create new user account

underscore and underscore or under bar

and under bar add user information to

related table so this will do that

Toofer versus the other I mean if you

just wanted to create a new user account

this would be a UX that would just put

them in the security system and again

you can write your own code to do the

rest but this just simplifies life okay

I'm gonna go ahead and this is saying

should I refresh it and say yes because

this is data bound and we're gonna have

to make some modifications this was

originally built with certain a while

back so you have to go in and make a few

changes on these things here so first

thing we're gonna do is the style it's

the old iOS 7 so I'm gonna go ahead and

select my project style so it uses my

project style so that's the first step

here so let's look at this UX first it's

got my controls and you can see there's

some there's some text here which has

instructions and how to do these pieces

here but you'll see we have those two

frames

the top part which is the information

for the personal data ie for the

extended user information table and then

the bottom part which is where you're

putting in the username password etc and

then you'll see there's some hidden

fields called user roles user UID space

or etc so that we need to do a few

things first is when this was originally

built it is a date about control so if I

go to first name and I scroll down here

you'll see that it's connected to a

table called registered users and field

name first name well mine looks

differently so this will break so the

first thing I need to do is reconnect

this UX to my data and to do that very

quickly I can just go over here to data

binding this allows me to control all

the data binding to this so I can go

ahead and I can say let's go ahead and

bind the control so I'm clicking this

second item is called bind the controls

on your UX two fields I'm gonna specify

the table and you can see oh I'm put in

at the wrong table

so I'm gonna go ahead and delete this

table and I'm gonna add this table by

the way feature requests would oh

actually I have to do one other thing

before I do that you'll notice also my

sequel let me let me go through that a

little slower

by the way I'll put in a feature request

might as well use extended underscore

user or underscore table so maybe it's

already done and pre connected to the

default field so I can go in to specify

table so you'll see that down here I'm

using a connection string called contact

manager well I don't have one of those

things so first I need to change the

connection string and I'm gonna use my

CEO and in let's see which one yes

that's the one I want to use then what I

want to do is then click the table to

add and you'll see I have my extended

user information table in there and

click OK

so now what I've done is tailed it I

told it that I'm going to data bind this

UX to this connection string in this

particular table and it has this

information and it knows what the

primary key is etc so that was step

number one was kind of telling the UX

well this is where you really need to

connect to

now that we've done that gives me a

warning saying well you got to kind of

reset things up so the next thing we

need to do here is to go to bind you X

component controls to table fields so

what this does is actually tell the

mapping between the field and the item

in these are my fields in my item in my

database so you can see it's still got

my old data here so I'm gonna go through

here I'm gonna say first name is now

going to go to my extended user

information table first name and you can

see now you have table alias and first

name last name phone and I don't think I

have phones so what I'm gonna do is I'm

gonna go ahead and just unbind that and

make it updatable so I'm kind of just

telling you to ignore that and then user

name is actually called user ID so I'm

binding again my fields on my screen two

fields in the database and right now I

only have three which is first name last

name and user ID by the way this user ID

is used for two things one is to insert

the record into the extended user

information table but also use to put

them in the security system by the way

that's how it works it kind of links

somewhat using that information so I

rebound to the correct table on

connection string I've rebound these so

now my connection is properly so if I go

here to first name and you can see it's

pointed to my correct table in my

correct field so I could go into my

database add a phone field and then come

back in here and then create that

binding once again so it stores it

properly in that extended user range and

in fact you can add as many other fields

as you want it's really up to you in

terms of you just keep adding the fields

and button bind them and then alpha will

take care of it from there

now the actual connection of the

database system ARDS the security system

is not done through bounding so you see

that I am binding the user name to that

user ID field but password are unbound

because they're not saved into the user

extended table and more importantly as

alpha takes care of doing all that stuff

for security purposes now we have to do

two other things so first step was

rebind this bad boy second step is we

need to go to the server-side events

so as you can see on the on dialog

initialized there's a little piece of

code here so what this is is that you'll

notice when I create the new user here

I'm not selecting the role by the way

you could add that feature if you wanted

to but I want this to be a specific role

so if I look at my user interface you're

gonna see there's a hidden field here

called user roles so the value that is

in here which needs to be one of my

group names is what's going to be stored

in the security system as the role for

this user so kind of behind the scenes

we're saying go ahead and create this

user but guess what they're gonna be in

this one role and again you could expose

that and allow the user to select that

it's really up to you so what I need to

do is when this UX loads I have to go in

and give it the name I want it to use so

I'm gonna go back to server side events

go to on dialog initialize and and let

me double check I don't want to screw

this up let me go to my web security my

group I want to put them in in this case

is users its name users so what I need

to do is in this piece of code here I

just have to type in users so what it's

going to do is it's going to go into the

security system get the unique ID for

users and store it in that hidden field

and that's all I have to do so now when

alpha goes to store that in the security

system it's gonna link them to the users

group and again you can modify that but

that's how this works here next what we

want to do is go here so you'll see

what's going on is after the user has

submitted the dialog it's going to do

two things first it's going to save the

data into the extended user information

table and this is a pre-built set of X

basic that does that then if it is

successful you'll notice it's doing an F

an if statement it says if this was

saved so if this is correct then yes

it's saved in the Descent table I want

to go ahead and save them into the

security system and this is important

because if for whatever reason it failed

inserting the person in extend user you

don't want an orphan record you want to

make sure you have a record in the

extended user information table and also

a record in the

security system now because and this is

kind of an inside baseball but very

important because I redid the data

mining you'll notice that earlier on

when I started doing that it gave me a

message saying hey you got to make sure

that everything is up to date if you go

if you're going to do this rebinding and

one of the most important things you

need to do if you ever redo a binding

for UX on a site then what you need to

do is go find where any of these

server-side actions are and all you have

to do is click on it go to action just

crypting edit action this reopens up my

how this is happening so this is

basically a control panel that says how

should it save this information it's

gonna write all the code for you but you

can modify it by saying okay I want to

show message if there's a failure do

this I want to do some post stuff a lot

of really cool things you can do here

but the important thing is when I open

this and click OK it rewrites the

underlying X basic that actually

performs this task and that's important

because if I've changed the data binding

I want to make sure all my X basic is

fresh and understands the new structure

so super important if you ever change

the data binding on a UX make sure you

go and just edit the action and close e

you don't even have to change it just

that step alone will make it happen now

I want to do the same thing here with

the security system I didn't change

anything on security but just to be safe

I'm gonna edit that action and click OK

here that's all you need to do but it's

a very important step because if you

don't do that then potentially and it

may work sometimes but you may see an

error win this curse so now what I can

do is save this I'm gonna call this

number two so now I've got that saved

and by the way this is a newer feature

where since it's a new component it says

oh you know what you have security on

here so I'm gonna say it requires login

and I need only administrators can see

this and then I'm gonna go back to my

tabbed UI I'm gonna go ahead and add

this new component into my tabbed UI

new user and I'll actually make it even

look a little nicer and I'll click okay

so now I have my component there so I'm

gonna save this save this I'm gonna do

that full publish here of everything to

my local system here but this could and

what's cool is all these features work

on is alpha cloud etc so you know it's

gonna work from there so I'm gonna go

ahead and log out here do a refresh just

to make sure I've got everything refresh

I'm going to log in as administrator

user error okay so now I have

user button here so I'm going to click

that okay so I'm gonna put in Bill doe

now I'm putting in a phone but it's not

gonna save it so it's kind of worthless

but I'm gonna go ahead and do bill dough

and I'm gonna remember there's no and

password a slow down path and we'll save

this okay no errors everything look good

oh I think that's emptied here but let's

go ahead and look and see if it added it

to our web security system there's our

new user oh no it didn't actually use it

interesting I wonder what it didn't

let's see oh you know what I might not

have had them the same so let me go

ahead and try this again so

it's taking a little longer this time

yeah I must not have these there and by

the way there are lots of ways for you

to add error messages verify etc you

know this is just meant to give you that

basic structure so let's go check and

now we have build oh and notice it put

them into the users group so remember

that was where we set that hidden field

let's go ahead and go back out here

logout go into build o go ahead and do

the login and it takes us in the system

but you'll notice now since I made some

modification I didn't set it up but I

would set this on the tabbed UI that

they couldn't see this but you'll notice

the other thing is gone because I said

you could only see that if there so now

I have that ability to add it and the

cool thing is this is now online so if I

publish it to alpha cloud it's gonna

store it into the alpha cloud security

structure is your web server you name it

it just in this case is storing it

locally from what there so that's a

introduction to the create new user and

insert them into both tables it's a

really powerful it's one you're probably

gonna use for any of your solutions

there if you want this component again

send us an email send it back to you

again you'll have to go through and

tailor it for your particular project

meaning you have to make sure to map it

to the correct table and connection

string and after you've done that it's

very important that you also refresh

your X basics so that everything works

properly there with that I don't know

once we got a few more minutes to cover

and then we can cover them from there so

then great for that question

excellent in fact we have three and a

half more minutes so we'll go through

those security questions here one is

Wolford is Oh would it be possible to

write a script that would add both a

user and a role at the same time imagine

that would be possible if you yes

absolutely and the way to look at that

is there are a whole bunch thank you for

going there yeah there are a whole bunch

of wonderful functions here for working

with you off anywhere security

system yeah we couldn't put this in the

chat window security is one of them got

it so in here are a bunch of pre-built

security methods so you can see in here

you have for instance add user to role

add user to roles and this is where you

can put in the user so all of these are

available and the cool thing about these

is that it doesn't matter what again I

kind of emphasize it but if you're on

Alf cloud versus I asked for standalone

it doesn't matter all of these will work

so you can write these little scripts to

basically you don't even need a user

interface you could literally create a

user interface where you just collect

the data and then behind the scenes run

a bunch of scripts to actually do the

work and whatever you need to do it the

nice thing is that the other ones a

little easier to implement because a lot

of the heavy lifting is done for you you

just need to do mapping of the table

structure from there but if you go to

there there's all of these there's

creating a role on the fly create a user

getting passwords getting the roles for

user all of those are available through

this basically the set of context

security functions fantastic and the

source you're porting to looks like

release notes I think this is no in the

official document oh yeah that's true I

should probably go here and let's go to

the context option I've just got that

one hard-coded in there there we go

let's see well it's probably context

object there we go

so I'll copy that mm-hmm and go here yep

Oh already had me so yeah you see I go

here to contact security object and then

this walks it and it shows you some

example code and some other things like

that on how to use that really powerful

stuff very cool well we have one minute

left it looks like ends we'll just take

a quick one and is there a way to secure

columns in that table like in other

words encrypt columns that that user

information table might have some social

security number and there or something

like that what are some options there

for encryption well one of the nice

things you can do is you there is built

in encrypt string function so there's a

built-in encryption technology and alpha

and so you can encrypt and decrypt data

and what you'll need to do is if you

want to encrypt that data before it goes

to the server or to the database what

you can do is you can come in here and

in your after daya BOTS I can say okay

let's say it's a data submitted dot

phone number so I can go here I can say

okay phone number is equal to that and

then I can say phone number is equal to

in encrypt string phone number comma and

then the key just so now that encrypts

it now before it actually saves here I

have to do a little trick I have to tell

alpha that I change that so what I do is

down here where's my oh I just reset it

there okay that's fine

oh I thought I had to do the dirty rows

on that okay no that's the e submitted

so then it would actually a dot data

submitted duck phone number equals just

something that variable phone number

wouldn't quite do the trick because it

doesn't it's not aware of that right

well it depends okay so one of the

tricks is and it's not showing up here

but because I think this is an old UX so

let me go ahead and create a new UX here

sure and let me go to the after server

side after dialog there this is the

newer one

so I actually this is safe now if if the

user entered a phone number it's gonna

work so but the the way to be super fete

safe is if you change anything you want

to store it's possible they didn't

modify the phone number but you still

want to encrypt it so we can do is you

say e dot dirty columns is equal to this

plus phone and this is the name in the

database the phone number here the

column in the database so now what will

happen is this tells alpha when it runs

this little piece of code oh no matter

whether the user

modify it or not because alpha tries to

save cycles so it only will apply the

insert or update based on what was

changed so in this case it says o add

that one end so you force it now here's

the other trick is when you do the on

dialogue initializers you're gonna have

to decrypt this number using the object

and updating that field manually because

alpha won't do that for you

automatically otherwise it's just going

to show the decrypt the encrypted data

in that of the field version yeah so

there's a little more work to be done

but the nice thing is you can encrypt

data before it goes to the database now

I would highly suggest that instead of

doing all that complexity you get a

database that supports encryption built

in or you don't have that play yep yeah

it's the only way to fly and I know the

sequel server does the problem is when

you start getting to there they start

charging a lot more money for a good

reason but if you're that serious about

security he's probably worth the money

and you also then don't have to worry

about a code you don't have to embed

keys in here there's just a lot of

advantages fantastic dan thanks very

much for a thank you great questions

from everybody fantastic questions if we

didn't get to your question today please

send an email to guides at alpha

software comm and we will be happy to

address it in the meantime Dionne is off

next week we will let you know when our

topic will be though before we do it I

think we're gonna have a guest speaker

possibly Sarah if she's back in action

otherwise we'll find someone for you but

we do home to some more energy we will

see you next week at the next Wednesday

webinar thanks very much for joining us

take care and have a great week