How To Use The HTML Editor - XMPRO App Designer Toolbox

In this video, you’ll learn how to use the HTML editor in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

welcome to another training video from

XM Pro today we will be looking at HTML

editor control in app designer so as you

can see I have a blank page here and in

the tool box under basic one can find a

control called hashed email editor HTML

editor is basically a rich text editor

where you can type in some notes or text

that that can take some word processing

like you can change fonts size of the

font you can you can change it to be

bold italic underlined etc you can even

put up some images in it and I'll show

you just now how to use it so basically

once you know where you want to put it

you would just drag it across and that

will give you the basic control in order

to configure it you would go to its

block properties and there are a few

options that you can tweak over here in

appearance the first thing you will

notice is that it has a toolbar option

that gives it the basic toolbar that

user can use to change certain things in

their text you would notice we have size

font all the usual word processing

options and we also have bullet lists

and including images you can even add a

code block and type in some code if you

want to so coming back to the options

here the next option usually you see is

a it's for visible which basically

decides that the control should be

visible or not and under behavior you

can choose if the control should be

read-only or disabled etc lastly there

is the option where you can provide some

static or default value if you need to

and that will be pre-loaded when this

app page is loaded on runtime so let's

let's save this and launch the app

we will see what it looks like as you

can see we have a we have a HTML or a

rich text editor here one thing you will

notice is that as I type text into it it

will grow automatically I'm to take the

amount of text that I'm typing in

otherwise it will just shrink back to

the sides you can change this by

applying certain styles on it like like

a height or with stahls if you choose to

now I have all the the word processing

options here and if I want to capture

something let's say I wanna capture a

bit of let's say in it that's at history

I can do that by typing that in and you

will see I have over here some font

options and I can give it some heading

under that I can type in some bullet

points for example and if I if I had

bound this I could I could have saved

this my text back to my data source so

that's that's one way of using it now if

you wanna actually load your data and as

I showed you in this case this is a

static control I can provide it a static

value which it will load all on this

runtime I can type something in but

let's say if my data is actually going

to come from from a data source I can

then put it inside a container which has

a data source attached to it

for example this container has a data

source so when I put it inside that I

will be able to bind it its value to the

items that are being returned by the

data source which are these in this case

I will bind it to history

and when I launch the app you will see

that it'll load some rich text out of

the database there so that's how you use

the HTML editor control in app designer

thank you so much for watching