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.
MD drop down with dynamic list
MD drop down with dynamic list
Arlyn Dale
Servias LLC
Servias LLC
Re: MD drop down with dynamic list
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".
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:
*** if you ever want to access a table to populate the drop down you can use a more typical code like this:
anyway, after you created your reusable part for the visualization, you can go to the field, visualization tab, add a dynamic picklist:
and select this reusable part you just created:
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:
and now in your web page, just drag that visualization of the field to the web page, and you are done.
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 (8.02 KiB) Viewed 11484 times
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
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
- SELYEAR02a.png (12.28 KiB) Viewed 11484 times
- SELYEAR02.png (47.95 KiB) Viewed 11484 times
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:
and now in your web page, just drag that visualization of the field to the web page, and you are done.
Re: MD drop down with dynamic list
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:
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)
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:
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 (48.31 KiB) Viewed 11475 times
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
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 (27.71 KiB) Viewed 11475 times