In this step you will replace the Date Acquired column in the employee skills list (EMPSKLS) with field STD_DATEX. This is a Date type field and has a default visualization of a Date Picker weblet.

When used as a column in the Grid weblet the default visualization is not recognised and you will need to add the jQuery UI DatePicker weblet to this column.

1. Change the definition of working list EMPSKLS as shown:
   Changes are shown in red.
   
   Def_List Name(#empskls) Fields(#SKILCODE #GRADE #COMMENT #std_datex (#dateacqr *hidden)  (#empno *hidden) (#dateacq *hidden)) Type(*Working) Entrys(*max)

   Note: The virtual field DATEACQ will still be required in the list to update the employee skills record. The real field DATEACQR cannot be used for update.

   
   
   
2. In WebRoutine Details, when the employee skills list is populated, set up field STD_DATEX with the value of field DATEACQ:
   Changes are shown in red.
   
   When (= D)
#tabindex := '1'
Fetch Fields(#empdata) From_File(pslmst) With_Key(#empno)
Clr_List Named(#empskls)
Select Fields(#empskls) From_File(pslskl) With_Key(#empno)
#std_datex := #dateacq.asdate( SYSFMT6 )
Add_Entry To_List(#empskls)
Endselect


3. When a new list entry is added for insert, set up field STD_DATEX using current date, and give GRADE a default value (see Step 9. Change Grade to a Dropdown list (Optional)).
   Changes are shown in red.
   
   When (= N)
#tabindex := '2'
#skl_list := *default
#std_datex := #std_datex.Now
#grade := P
Add_Entry To_List(#empskls) After(*START)
Message Msgtxt('Complete new skill in top row')


4. When employee skills are updated, set up field DATEACQ:
   Changes are shown in red.
   
   When (= S)
#tabindex := '2'
Selectlist Named(#empskls)
#dateacq := #std_datex.asnumber( DDMMYY )
If (#dateacqr *NE *zeroes)
Update Fields(#empskls) In_File(pslskl) With_Key(#empno #skilcode) Val_Error(*next)
If_Status Is_Not(*okay)
Message Msgtxt('Errors occurred on skills updates')
Endif
Else
Insert Fields(#empskls) To_File(pslskl) Val_Error(*next)
If_Status Is_Not(*okay)
Message Msgtxt('Insert failed')
Else
Message Msgtxt('Skills for ' + #empno + ' were changed')
Endif
Endif
Endselect
    
5. At the top of the program, override the column heading for STD_DATEX, with the following:
   
   Override Field(#std_datex) Colhdg('Date' 'Acquired' '')


6. Compile your WAM.
   
   
7. Open the Details WebRoutine in the Design view and select the Skills tab.
   
   
   1. With the Tab Pages weblet selected, change its content_width to 600px, so that the new date column will be visible in the Design view.
      
      
   2. Select the grid. Open the Design of… dialog using the ellipsis button for the grid_column_properties value. Select Customize Column for field STD_DATEX and click OK.
      
      
      
   3. On the Weblet Templates tab, select jQuery UI in the dropdown. Drop a jQuery UI Datepicker weblet into the new Date Acquired column.
      
      
   4. With the jQuery UI Datepicker selected, on the Details tab, change the dateFormat to dd/mm/yyyy (or use the format suitable for your region).
      
      
   5. Select the Details tab page and save your changes.
      
      
8. Retest your WAM. Date Acquired in the Skills grid will now be displayed in dd/mm/ccyy format. Selecting a Date Acquired will display the calendar prompt.
   
   
    
9. Change a Date Acquired and Save the changes. Redisplay the employee skills to show the date was updated correctly.
   
   
10. Add a new skill. The Date Acquired column should initially contain current date.