VLWeb SP2 Material Design and Dynamic PickLists

[jyoung]

Are dynamic picklists still supported?

I have a field that I want to add a visualization to. I add a material design dropdown field and it creates a static picklist. I need a dynamic one, so I go to create a new one, but the File->New->Resuable Part no longer has the dynamic picklist option. I create it based off the object and implement the IDynamicPickList interface. When I add it to the field, it creates a standard Visual PickList.

That standard visual picklist seems to be getting rendered as a material design drop down. The picklist is firing as I can see the items coming down, but the items never show up in the dropdown.

If the standard dynamic drop list is being rendered as a MD dropdown, why is there a MD visualization? Which one are you supposed to use?

Here is the field visualization.

capture5.PNG (36.16 KiB) Viewed 11187 times

And the dynamic picklist

Code: Select all

function options(*DIRECT)
begin_com role(*EXTENDS #PRIM_OBJT *IMPLEMENTS #PRIM_DC.IDynamicPicklist)

def_list name(#List) fields(#PublisherId #Name) type(*WORKING) entrys(*MAX)

mthroutine name(Load) options(*REDEFINE)

define_com class(#HAVPublishersServer.Find) name(#publishers)

#publishers.ExecuteAsync List(#List)

evtroutine handling(#publishers.Completed)
#Picklist.RemoveAll

selectlist named(#List)
#Picklist.Add( #PublisherId.AsString #Name )
endselect
endroutine

endroutine
end_com

[lawingo]

I created mine a little backwards from how you said you did. I created a normal Reusable Part and attached it to the field.
I created a Dynamic Picklist on the Field:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_OBJT)

Begin_Com Role(*Visual #PRIM_EVEF) Name(#VisualEdit) Defaultvisual(True) Usepicklist(False) Componentversion(1) Height(21) Width(466)

End_Com

Begin_Com Role(*Dynamic_Picklist #ITOP_P02) Name(#DynamicPicklist) Nomatchaction(Blanks)

End_Com
Begin_Com Role(*Visual #PRIM_EVPL) Name(#VisualPicklist) Appearance(DropDownList) Height(19) Componentversion(1) Width(251)

End_Com
End_Com

Here is the code for the Picklist RP (#ITOP_P02):

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL) Displayposition(1) Height(20) Layoutmanager(#ATLM_1) Left(0) Tabposition(1) Tabstop(False) Top(0) Width(305)
Define_Com Class(#ITOP_DM) Name(#ITOP_DM) Reference(*DYNAMIC)
Define_Com Class(#PRIM_CMBX) Name(#CMBX_Main) Componentversion(1) Displayposition(1) Fixedheight(False) Left(0) Parent(#PANL_Main) Showselection(False) Showselectionhilight(False) Tabposition(1) Top(0) Width(305)
Define_Com Class(#PRIM_ATLM) Name(#ATLM_1)
Define_Com Class(#PRIM_ATLI) Name(#ATLI_2) Attachment(Top) Manage(#CMBX_Main) Parent(#ATLM_1)
Define_Com Class(#PRIM_PANL) Name(#PANL_Main) Displayposition(1) Height(20) Layoutmanager(#ATLM_2) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(305)
Define_Com Class(#PRIM_ATLI) Name(#ATLI_3) Attachment(Center) Manage(#PANL_Main) Parent(#ATLM_1)
Define_Com Class(#PRIM_CBCL) Name(#CBCL_1) Displayposition(1) Parent(#CMBX_Main) Source(#ITOPSTAT) Usepicklist(False)

Define_Com Class(#prim_nmbr) Name(#Start)
Define_Com Class(#prim_alph) Name(#Candidate)
Define_Com Class(#PRIM_CBCL) Name(#CBCL_2) Parent(#CMBX_Main) Source(#ITOPID) Usepicklist(False) Visible(False)
Define_Com Class(#PRIM_ATLM) Name(#ATLM_2)
Define_Com Class(#PRIM_ATLI) Name(#ATLI_5) Attachment(Center) Manage(#CMBX_Main) Parent(#ATLM_2)

Define_Com Class(#PRIM_ATLM) Name(#ATLM_3)

Define Field(#W_HOLD) Reffld(#DVDPNMUC)

Define_Evt Name(uChanged)
Define_Map For(*INPUT) Class(#ITOPSTAT) Name(#miStation)
Define_Map For(*INPUT) Class(#ITOPID) Name(#miID)

* Define_Evt Name(uNewButtonPushed)

Evtroutine Handling(#COM_OWNER.CreateInstance)

* Clear the List
Clr_List Named(#CMBX_Main)

If_Ref Com(#ITOP_DM) Is(*NULL)
Set_Ref Com(#ITOP_DM) To(*CREATE_AS #ITOP_DM)
Endif

#ITOP_DM.uGetStationList
Endroutine


Evtroutine Handling(#ITOP_DM.ListPrepared) Modropdownlist(#mDataList)
Clr_List Named(#CMBX_Main)

#ITOPSTAT := ' '
Add_Entry To_List(#CMBX_Main)

Selectlist Named(#mDataList)
Add_Entry To_List(#CMBX_Main)
Endselect

* Select 1st Record (it's a blank record)
Selectlist Named(#CMBX_Main)
Set Com(#CMBX_Main.CurrentItem) Focus(True) Selected(True) Ensurevisible(True)
Leave
Endselect

Set_Ref Com(#ITOP_DM) To(*NULL)
Endroutine

*

Evtroutine Handling(#CMBX_Main.ItemGotSelection)
Selectlist Named(#CMBX_Main) Where(#CMBX_Main.CurrentItem.Selected = True)

Signal Event(uChanged) Miid(#ITOPID) Mistation(#ITOPSTAT)

Endselect
Endroutine

[jyoung]

Are you using the Material Design controls? The new MD fields drop a PRIM_MD object not a PRIM_EV* for me.

For the visualization mine shows

Code: Select all

begin_com role(*Visual #PRIM_MD.DropdownField) name(#DropdownField) DefaultVisual(True) CaptionType(Label) Width(421)

end_com

Then using that field shows

Code: Select all

define_com class(#PublisherId.DropdownField) name(#PublisherId) DisplayPosition(5) Left(16) Parent(#Details) TabPosition(5) Top(288) Width(790)

The only way I have been able to get items into the drop down is through is with something like this.

Code: Select all

#PublisherId.Items.Add Value('1') Caption('Marvel')
#PublisherId.Items.Add Value('2') Caption('DC')

The only way I figured that out is by finding the samples, which BTW, are not listed on the samples page, instead you have find them yourself.

I thought to create a Visual Host as well, but that too has been removed from the File->New->Resuable Part menu.

[caseywhite]

I like the idea of using a visual host. It makes it pretty easy to deal with the field in that it doesn't matter if it is a check box, drop down or whatever you come up with. Not sure why it was removed because it works perfectly well. Also you can extend multiple interfaces so the same RP can be used in a list and as a basic header type field.

Code for the host visualization is below since you can't have it generated for you by the IDE. It shows an example of extending 2 interfaces. It is used to associate a field with a material design slider. The benefit of this is that you can use the field description as the text to the left and then if you want to show a generic caption of ON or OFF based on whether the slider is on or off you can use the slider caption for that. In some cases the slider is just the visual and in some cases people like to put the text of what the slider means to the right.

Personally I like host visualizations over any other type of visualization so that I can have a single appropriate to all my visualizations. I think this simplifies training other developers who come on board as well.

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_dc.iMonitorSubject #Prim_dc.iContextualSubject #Prim_List.iListCellDesign *ListFields #ListFields) Defaultpty(Value) DisplayPosition(1) Height(40) LayoutManager(#Layout) Left(0) TabPosition(1) TabStop(False) Top(0) Width(150)
Group_By Name(#ListFields) Fields(#STD_TEXT)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) BorderBottom(1) BorderBrush(#Brush1) BorderLeft(1) BorderRight(1) BorderTop(1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(White)

Define_Com Class(#PRIM_ATLM) Name(#Layout)
Define_Com Class(#PRIM_ATLI) Name(#LayoutItem1) Attachment(Center) Parent(#Layout)

Define_Com Class(#PRIM_MD.Switch) Name(#Switch) Checked(True) DisplayPosition(1) IconAlignment(CenterLeft) IconColor(Theme500) Left(0) Parent(#COM_OWNER) TabPosition(1) Top(0) Height(40) CaptionAlignment(CenterRight) Width(113)

Define_Pty Name(Value) Get(GetPropertyValue) Set(SetPropertyValue)

* HEADER FIELD LOGIC
Ptyroutine Name(GetPropertyValue)
Define_Map For(*OUTPUT) Class(#STD_FLAG) Name(#Property)

#Property := #STD_TEXT
Endroutine

Ptyroutine Name(SetPropertyValue)
Define_Map For(*INPUT) Class(#STD_FLAG) Name(#Property)

If Cond(#Property = 'Y')
#Switch.Checked := True
#Switch.Caption := 'ON'
Else
#Switch.Checked := False
#Switch.Caption := 'OFF'
Endif

#STD_TEXT := #Property
Endroutine

Mthroutine Name(OnContextChanged) Options(*REDEFINE)

If (#Context *Is #prim_evp)

If ((#Context *As #prim_evp).ReadOnly)
#Switch.Enabled := False
Else
#Switch.Enabled := True
Endif
Endif
Endroutine

Evtroutine Handling(#Switch.Changed)

If Cond(#Switch.Checked = True)
#STD_TEXT := 'Y'
Else
#STD_TEXT := 'N'
Endif

Signal Event(ValueChanged)
Endroutine

* IF USED IN A LIST LOGIC
Mthroutine Name(OnAdd) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnCellGotFocus) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnCellLostFocus) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnDelete) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnDropDownValueChanged) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemGotFocus) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemLostFocus) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemGotSelection) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemLostSelection) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemGotReference) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnItemRealizing) Options(*REDEFINE)
Endroutine

Mthroutine Name(OnUpdate) Options(*REDEFINE)
Endroutine

End_Com

[Dino]

Been playing with this today, while we don't have the option to generate automatically a visual picklist for a web reusable part, we can generate one reusable part for an object and fix the code with something like this in a reusable part #DEPTMENTVD:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_OBJT *implements #Prim_dc.iDynamicPicklist)
Def_List Name(#DEPTAB) Fields(#DEPTMENT #DEPTDESC) Type(*WORKING) Entrys(*MAX)

Mthroutine Name(Load) Options(*REDEFINE)
Define_Com Class(#DEPTABSM.FindAll) Name(#Findall)
#FindAll.Execute Deptablist(#DEPTAB)
#Picklist.RemoveAll
Selectlist Named(#DEPTAB)
#Picklist.Add( #DEPTMENT #DEPTDESC )
Endselect
Endroutine

End_Com

Which in this case is the same code as always to handle the visualization of a field, just this time, the reusable part is marked for Web Platform, and is using a server module to get the values to populate the visualization of the field instead of reading the data directly with a select in the code, like in windows apps.

Then, back to the field #DEPTMENT in the LANSA Repository, Visualization tab, drag the google material drop down visualization from the top, add the picklist reusable part and we have this in the visualization tab of the field:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_OBJT)

Begin_Com Role(*Visual #PRIM_EVEF) Name(#VisualEdit) Componentversion(1) Defaultvisual(True) Height(21) Usepicklist(False) Width(225)

End_Com

Begin_Com Role(*Visual #PRIM_MD.DropdownField) Name(#DropdownField) Width(325)

End_Com
Begin_Com Role(*Dynamic_Picklist #DEPTMENTVD) Name(#DynamicPicklist) Nomatchaction(ShowValue)

End_Com
End_Com

and that is it. Next time you need to have a Drop Down visualization in a web page with the field #DEPTMENT, you just need to go to the LANSA Repository, fields, find DEPTMENT field, expand, and you will see the visualizations available.
Drag and drop the DropDownField visualization for the DEPTMENT to your web page/view/dialog/reusable part and you are done, no need for anything else.

Sorry I ran out of images allowed to post in the forum