Positioning Alert control

[gyehyun.kim]

Hello,

Does anybody know how to position alert control(#PRIM_MD.Alert) in a visible area in VL Web?

I would like to show the alert message at the bottom of visible area of web page with long contents.

It would be appreciated if you give me any suggestion.

Thank you.

[JamesDuignan]

Hi,

PRIM_MD.Alert controls are designed to have only 1 or 2 lines of text on them. They are realistically only for showing short messages which would be the action and the result, such a "File abc.docx upload successful" or "File abc.docx download Failed". This can be accompanied by a button to perform another action, such as retry or show more details etc.

I would suggest using the alert to prompt the user something has failed, include a button to show more details and display the details in a dialog.
Below is an example of this.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutPage) Width(1040)
Define_Com Class(#PRIM_TBLO) Name(#LayoutPage)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutPageRow1) Displayposition(1) Parent(#LayoutPage)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutPageColumn1) Displayposition(1) Parent(#LayoutPage)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutPageItem1) Alignment(BottomCenter) Column(#LayoutPageColumn1) Manage(#Alert) Parent(#LayoutPage) Row(#LayoutPageRow1) Sizing(FitToWidth) Marginbottom(16) Marginleft(16) Marginright(16)
* Layout Alert
Define_Com Class(#PRIM_TBLO) Name(#LayoutAlert)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutAlertRow1) Displayposition(1) Parent(#LayoutAlert)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutAlertColumn1) Displayposition(1) Parent(#LayoutAlert)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutAlertItem1) Alignment(CenterRight) Column(#LayoutAlertColumn1) Parent(#LayoutAlert) Row(#LayoutAlertRow1) Sizing(ContentWidthAndHeight) Marginright(8) Manage(#MoreDetails)
* LayoutDialog
Define_Com Class(#PRIM_TBLO) Name(#LayoutDialog) Sizing(ContentHeight)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutDialogColumn1) Displayposition(1) Parent(#LayoutDialog)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutDialogRow1) Displayposition(1) Parent(#LayoutDialog) Height(146) Units(Content)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutDialogRow2) Displayposition(2) Parent(#LayoutDialog) Height(52) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutDialogItem2) Alignment(CenterRight) Column(#LayoutDialogColumn1) Manage(#ButtonRetry) Parent(#LayoutDialog) Row(#LayoutDialogRow2) Sizing(ContentWidth) Marginright(8) Flow(Left)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutDialogItem3) Column(#LayoutDialogColumn1) Manage(#Text) Parent(#LayoutDialog) Row(#LayoutDialogRow1) Marginleft(24) Sizing(ContentHeightFitToWidth) Marginright(24)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutDialogItem1) Alignment(CenterRight) Column(#LayoutDialogColumn1) Manage(#ButtonOK) Parent(#LayoutDialog) Row(#LayoutDialogRow2) Sizing(ContentWidth) Marginright(8) Flow(Left)



* Alert

Define_Com Class(#PRIM_MD.Alert) Name(#Alert) Displayposition(1) Parent(#COM_OWNER) Tabposition(1) Top(736) Themedrawstyle('Back(96,96,96,1)') Duration(5000) Width(1008) Wordwrap(True) Closeicon(False) Caption('File failed to download') Captionalignment(CenterLeft) Layoutmanager(#LayoutAlert) Captionmarginleft(16) Captionmarginright(124) Left(16) Height(48)
Define_Com Class(#PRIM_MD.FlatButton) Name(#MoreDetails) Caption('Show Details') Displayposition(1) Left(900) Parent(#Alert) Tabposition(1) Paddingbottom(8) Paddingright(8) Paddingleft(8) Paddingtop(8) Top(6)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button) Caption('Download File ABC123.txt') Displayposition(2) Left(109) Parent(#COM_OWNER) Tabposition(2) Top(96) Themedrawstyle('MediumTitle') Width(196)

* Dialog

Define_Com Class(#PRIM_DLG) Name(#Details) Layoutmanager(#LayoutDialog) Autoclose(True) Themedrawstyle('Shadow2+Card')
Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('File ABC123.txt failed to download because Aliquam laoreet, dui et feugiat ultrices, lacus sapien auctor justo, ullamcorper iaculis lorem dui id ipsum. Nam pharetra cursus cursus. Proin quis ipsum eget purus rhoncus vestibulum. Nullam at turpis eget sapien eleifend suscipit.') Displayposition(2) Left(24) Parent(#Details) Tabposition(3) Top(0) Height(146) Width(275) Captionalignment(TopLeft) Ellipses(False) Wordwrap(True) Paddingtop(24)
Define_Com Class(#PRIM_MD.FlatButton) Name(#ButtonRetry) Caption('Retry') Displayposition(1) Left(262) Parent(#Details) Tabposition(2) Tabstop(False) Top(154) Paddingleft(8) Paddingright(8) Width(53)
Define_Com Class(#PRIM_MD.FlatButton) Name(#ButtonOK) Caption('OK') Displayposition(1) Left(215) Parent(#Details) Tabposition(1) Tabstop(False) Top(154) Paddingleft(8) Paddingright(8) Width(39)




Evtroutine Handling(#Button.Click)

#COM_OWNER.Download

Endroutine

Evtroutine Handling(#MoreDetails.Click)

#Details.Show
#Alert.HideAlert

Endroutine

Evtroutine Handling(#ButtonRetry.Click)

#Details.Close
#COM_OWNER.Download

Endroutine

Evtroutine Handling(#ButtonOK.Click)

#Details.Close

Endroutine

Mthroutine Name(Download)

#Alert.ShowAlert

Endroutine


End_Com

Regards,

James

[gyehyun.kim]

Hi James,

I am sorry my first explanation wasn't enough.
Actually what I was wondering was how to set the position of #Alert to a certain position in a visible area.

When a web page scrolls, user might not see the alert if it's fixed in layout.
In your example, top is set to 736, which is fine when there's no scroll in the page. Pretend the download button is at the bottom of the page and a user scroll down the page and click it. The #alert will show up, but the user can't see it.

Thanks for the feedback though. That was helpful.

Regards,
Gyehyun

[JamesDuignan]

Hi Gyehyun,

This is dependent on how you are laying out your content, but I suspect using a table layout with positioning to bottom center for the alert should display it at the bottom of the visible page and allow scrolling to of the other content without effecting the position of the alert itself.

See example of what i mean below:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

* This Could be a view or reusable part part on your page
Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(56) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Manage(#Appbar) Parent(#LayoutMain) Row(#LayoutMainRow1) Column(#LayoutMainColumn1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#LISTPANEL) Parent(#LayoutMain) Row(#LayoutMainRow2) Marginbottom(8) Marginleft(8) Marginright(8) Margintop(8)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Alignment(BottomCenter) Column(#LayoutMainColumn1) Manage(#Alert) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(FitToWidth) Marginbottom(16) Marginleft(16) Marginright(16)

Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) Displayposition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Alignment(TopCenter) Column(#Layout1Column1) Manage(#List) Parent(#Layout1) Row(#Layout1Row1)


Define_Com Class(#PRIM_PANL) Name(#LISTPANEL) Parent(#COM_OWNER) Displayposition(2) Tabposition(2) Height(728) Left(8) Top(64) Width(1184) Layoutmanager(#Layout1)
Define_Com Class(#Prim_LIST) Name(#List) Parent(#LISTPANEL) Displayposition(1) Tabposition(1) Height(728) Left(0) Top(0) Width(1184) Rowheight(57)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn1) Columnunits(Proportion) Columnwidth(1) Displayposition(1) Parent(#List) Sortonclick(True) Source(#xDemoAlpha256)
Define_Com Class(#PRIM_MD.Alert) Name(#Alert) Displayposition(1) Parent(#COM_OWNER) Tabposition(1) Top(728) Caption('Error! This Alert box could indicate a negative or potentially dangerous action') Themedrawstyle('LightError') Width(1168) Left(16)
Define_Com Class(#PRIM_MD.AppBar) Name(#Appbar) Caption('Title') Displayposition(3) Icon('menu') Parent(#COM_OWNER) Tabposition(3) Themedrawstyle('Heading2') Width(1200)


Evtroutine Handling(#COM_OWNER.Initialize)

#xDemoAlpha256 := 'This will be a long list'

Inz_List Num_Entrys(256)

#Alert.ShowAlert

Endroutine

End_Com

regards,
James Duignan

[gyehyun.kim]

Thank you very much for your kind explanation.