Visual LANSA Forum

Community Forum for Visual LANSA
https://forum.developer.lansa.com/

MD drop down with dynamic list

https://forum.developer.lansa.com/viewtopic.php?t=2656

Page 1 of 1

MD drop down with dynamic list

Posted: Sat Aug 27, 2022 1:48 am
by adale
I want to use the field visualization MD DropdownField for a commonly used field in our VL Web application.
I am familiar with the *picklist #PKIT creation to build a static listing of values for the drop down. ( building the list of Months, or States, etc.)

What is the method to use with the Material Design DropdownField visualization with a dynamically built list?

In this case, I want to have the drop down list populated with 5 year entries (YYYY) starting with the current year, and then the next 4 years.

I have built a working MD drop down field in a Dialog, but was wanting to move it to the field visualization so that I wouldn't have to have that bit of code in each Dialog that we use it in.

Re: MD drop down with dynamic list

Posted: Sun Aug 28, 2022 12:59 pm
by Dino
Hi Arlyn

Lets say you have a field SELYEAR, you can create a reusable part, for example object.
Note that while reusable parts can have different flavors, one way to classify them, is by the platform where it will run, then you have the ones that will be running in the client (browser), and the ones that will be running in the server. You want to use this one as a visualization, that means it will run in the browser, so select "Web Browser".
SELYEAR01.png
SELYEAR01.png (8.02 KiB) Viewed 11488 times
For code, this will do it. Note that been in the browser, you can also use a server module here if needed and all that. But for your requirement of just 5 years... well, no need of a server module:

Code: Select all

Function Options(*Direct)
Begin_Com Role(*EXTENDS #PRIM_OBJT *implements #Prim_dc.iDynamicPicklist)
Mthroutine Name(Load) Options(*Redefine)
#Picklist.RemoveAll
#std_num := #DATEX.Now.Year
Begin_Loop To(5)
#Picklist.Add Value(#std_num.AsString) Caption(#std_num.AsString)
#std_num += 1
End_Loop
Endroutine
End_Com
*** if you ever want to access a table to populate the drop down you can use a more typical code like this:

Code: Select all

Function Options(*Direct)
Begin_Com Role(*EXTENDS #PRIM_OBJT *implements #Prim_dc.iDynamicPicklist)
Def_List Name(#PSLMSTList) Fields(#EMPNO #SURNAME) Type(*Working) Entrys(*Max)

Mthroutine Name(Load) Options(*Redefine)
Define_Com Class(#PSLMSTSM.FindAll) Name(#PSLMSTFindall)
#PSLMSTFindall.Execute PSLMSTList(#PSLMSTList)
#Picklist.RemoveAll
Selectlist Named(#PSLMSTList)
#Picklist.Add( #EMPNO #SURNAME )
Endselect
Endroutine
End_Com
anyway, after you created your reusable part for the visualization, you can go to the field, visualization tab, add a dynamic picklist:
SELYEAR02a.png
SELYEAR02a.png (12.28 KiB) Viewed 11488 times
and select this reusable part you just created:
SELYEAR02.png
SELYEAR02.png (47.95 KiB) Viewed 11488 times
you will notice that when you add a dynamic picklist, it also creates by default a windows drop down... you don't need that one, you can delete that.

Then add the google material drop down from the toolbar selection and again, you will notice that by default adding that material design drop down component will also add a static picklist. you don't need that static picklist, just delete the extra code...
So the final code in the visualization tab is this:
Image

and now in your web page, just drag that visualization of the field to the web page, and you are done.
Image

Re: MD drop down with dynamic list

Posted: Sun Aug 28, 2022 10:55 pm
by Dino
remember that visual picklist in the form a drop down... is just one of the options.

In this new web world, with touch screen and stuff, sometimes visual parts are better suit.

and I know the example I am going to show you here, should be way better, more flexible and probably even less lines of code using collections but I need my coffee first, so, later. If you create a reusable part to act as your visual part, you can add it to your field in visualization, just using the option to select Visual Part for example for this field SELYEAR:
selyearrp01.png
selyearrp01.png (48.31 KiB) Viewed 11479 times
the code for the reusable part #SELYEARRP, which can be created for example using panel, but anyway, you will be replacing the code, so no matter, could be like this: (again, collections is better solution, but just for clarity, lets begin with this one)

Code: Select all

Function Options(*Direct)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_dc.iMonitorSubject) Defaultpty(Value) DisplayPosition(1) Height(65) TabPosition(1) Left(0) Top(0) Width(449) LayoutManager(#Layout) ThemeDrawStyle('Card')

Define_Com Class(#PRIM_TBLO) Name(#Layout)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) DisplayPosition(1) Parent(#Layout) Units(Pixels) Width(150)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) DisplayPosition(2) Parent(#Layout) Width(56) Units(Content)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) DisplayPosition(1) Parent(#Layout)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Manage(#Button) Parent(#Layout) Row(#LayoutRow1) Sizing(None) Column(#LayoutColumn2) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Manage(#Button1) Parent(#Layout) Row(#LayoutRow1) Sizing(None) Column(#LayoutColumn2) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Manage(#Button2) Parent(#Layout) Row(#LayoutRow1) Sizing(None) Column(#LayoutColumn2) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem4) Manage(#Button3) Parent(#Layout) Row(#LayoutRow1) Sizing(None) Column(#LayoutColumn2) Flow(Right)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem5) Manage(#Button4) Parent(#Layout) Row(#LayoutRow1) Sizing(None) Column(#LayoutColumn2) Flow(Right)

Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('Select Year') DisplayPosition(1) Left(0) Parent(#COM_OWNER) TabPosition(1) Top(13) Width(160) ThemeDrawStyle('Subheading')
Define_Com Class(#PRIM_MD.ActionButton) Name(#Button) DisplayPosition(2) Left(150) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumTitle') Top(3) Caption('2022')
Define_Com Class(#PRIM_MD.ActionButton) Name(#Button1) DisplayPosition(3) Left(206) Parent(#COM_OWNER) TabPosition(6) ThemeDrawStyle('MediumAccent') Top(3) Caption('2022')
Define_Com Class(#PRIM_MD.ActionButton) Name(#Button2) DisplayPosition(4) Left(262) Parent(#COM_OWNER) TabPosition(5) ThemeDrawStyle('MediumAccent') Top(3) Caption('2022')
Define_Com Class(#PRIM_MD.ActionButton) Name(#Button3) DisplayPosition(5) Left(318) Parent(#COM_OWNER) TabPosition(4) ThemeDrawStyle('MediumAccent') Top(3) Caption('2022')
Define_Com Class(#PRIM_MD.ActionButton) Name(#Button4) DisplayPosition(6) Left(374) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('MediumAccent') Top(3) Caption('2022')

* Define_Evt Name(ValueChanged)
Define_Pty Name(Value) Get(GetPropertyValue) Set(SetPropertyValue)

Evtroutine Handling(#COM_OWNER.Initialize)
* #Text.Caption := #COM_ANCESTOR.Name
#Button.Caption := #DATEX.Year.AsString
#Button1.Caption := (#DATEX.Year + 1).AsString
#Button2.Caption := (#DATEX.Year + 2).AsString
#Button3.Caption := (#DATEX.Year + 3).AsString
#Button4.Caption := (#DATEX.Year + 4).AsString
Endroutine

Ptyroutine Name(GetPropertyValue)
Define_Map For(*Output) Class(#prim_alph) Name(#Property)
#Property := #SELYEAR
Endroutine

Ptyroutine Name(SetPropertyValue)
Define_Map For(*Input) Class(#prim_alph) Name(#Property)
#SELYEAR := #Property
Case (#SELYEAR.AsNumber)
When ('= #DATEX.year')
#Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button.ThemeDrawStyle := 'MediumSuccess'
When ('= #DATEX.year + 1')
#Button.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button1.ThemeDrawStyle := 'MediumSuccess'
When ('= #DATEX.year + 2')
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button2.ThemeDrawStyle := 'MediumSuccess'
When ('= #DATEX.year + 3')
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button3.ThemeDrawStyle := 'MediumSuccess'
When ('= #DATEX.year + 4')
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle := 'MediumAccent'
#Button4.ThemeDrawStyle := 'MediumSuccess'
Endcase
Endroutine

Evtroutine Handling(#Button.Click)
#Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button.ThemeDrawStyle := 'MediumSuccess'
#SELYEAR := #DATEX.Year.AsString
Signal Event(ValueChanged)
Endroutine

Evtroutine Handling(#Button1.Click)
#Button.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button1.ThemeDrawStyle := 'MediumSuccess'
#SELYEAR := (#DATEX.Year + 1).AsString
Signal Event(ValueChanged)
Endroutine

Evtroutine Handling(#Button2.Click)
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button3.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button2.ThemeDrawStyle := 'MediumSuccess'
#SELYEAR := (#DATEX.Year + 2).AsString
Signal Event(ValueChanged)
Endroutine

Evtroutine Handling(#Button3.Click)
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button4.ThemeDrawStyle := 'MediumAccent'
#Button3.ThemeDrawStyle := 'MediumSuccess'
#SELYEAR := (#DATEX.Year + 3).AsString
Signal Event(ValueChanged)
Endroutine

Evtroutine Handling(#Button4.Click)
#Button.ThemeDrawStyle #Button1.ThemeDrawStyle #Button2.ThemeDrawStyle #Button3.ThemeDrawStyle := 'MediumAccent'
#Button4.ThemeDrawStyle := 'MediumSuccess'
#SELYEAR := (#DATEX.Year + 4).AsString
Signal Event(ValueChanged)
Endroutine
End_Com
notice that basically this visual part shows whatever, i decided to use 5 round buttons in a row, receive a property to be able to have an starting value, sets a property with the value selected, signals the ValueChanged event, and changes the color of the selected component so you can see what is selected. It does not have to be round buttons, it could be a whole program here.

And in the same way as other visualizations you can bring it to your web page, view, dialog, etc.

For example I am using 2 of the previous picklist visualizaiton and 2 of the new one here in this web page:

Code: Select all

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

Define_Com Class(#SELYEAR.DropdownField) Name(#SELYEAR) DisplayPosition(1) Left(40) Parent(#COM_OWNER) TabPosition(1) Top(52)
Define_Com Class(#SELYEAR.DropdownField) Name(#SELYEAR1) DisplayPosition(2) Left(45) Parent(#COM_OWNER) TabPosition(2) Top(170)
Define_Com Class(#SELYEAR.VisualPart) Name(#SELYEAR2) DisplayPosition(3) Left(54) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(275)
Define_Com Class(#SELYEAR.VisualPart) Name(#SELYEAR3) DisplayPosition(4) Left(54) Parent(#COM_OWNER) TabPosition(4) TabStop(False) Top(382)

Evtroutine Handling(#Com_owner.Initialize)
#SELYEAR2 := "2024"
Endroutine

Evtroutine Handling(#SELYEAR2.ValueChanged)
#sys_web.Alert Caption('SELYEAR2 value is ' + #SELYEAR2)
Endroutine
End_Com
selyearrp02.png
selyearrp02.png (27.71 KiB) Viewed 11479 times
All times are UTC+10:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited