Versions Compared

Old Version 1

changes.mady.by.user Rieko Saitoh

Saved on

compared with

New Version Current

changes.mady.by.user Rieko Saitoh

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

WAM060 - Employee Maintenance using Advanced Weblets
The The Details WebRoutine:

  • Will be invoked by selecting an employee in the employees list, using the Anchor weblet (also known as a hyperlink). Output for the Details WebRoutine will be shown on the ShowPage web page.
  • Output will be displayed in the Navigation Panel on the right of the Vertical Splitter.
  • Will handle display and update of employee and employee skills data. It will also handle adding a new skill for the employee.

...


  1. At the top of your WAM, begin by defining fields, lists or group_by that will be required to support the Details WebRoutine.

    1. Define a

...

    1. working list, EMPSKLS for employee skills containing SKILCODE, GRADE, COMMENT, DATEACQ, DATEACQR and EMPNO . DATEACQR and EMPNO should be hidden.

...

    1. Define a work field EMPNOW based on EMPNO

...

    1. Define a group_by, EMPDATA containing fields EMPNOW, SURNAME, GIVENAME, ADDRESS1, ADDRESS2, ADDRESS3, POSTCODE, PHONEBUS and PHONEHME. EMPNOW should be output.

...


    1. Your code should look like the following:
           Def_

...

    1. List Name(#empskls)

...

    1.  Fields((

...

    1. #SKILCODE *out)

...

    1.  #GRADE #COMMENT #DATEACQ (#dateacqr *hidden)

...

    1.  (

...

    1. #empno *hidden))

...

    1.  Type(*Working)
           *

...

    1.      Define Field(#empnow)

...

    1.  Reffld(#empno)
           Group_

...

    1. By Name(#empdata)

...

    1.  Fields((

...

    1. #empnow *out)

...

    1.  #SURNAME #GIVENAME #ADDRESS1 #ADDRESS2 #ADDRESS3 #POSTCODE #PHONEHME #PHONEBUS)

  2. Create a Details WebRoutine. Initially you will create a simple version of this WebRoutine and then extend it.

...


    1. Map field EMPNO for both as a hidden field.

...

    1. Map for both, Group_by, EMPDATA and list EMPSKLS. EMPSKLS should be mapped with a *private attribute. *Private means it will not be automatically shown on the web page.

...


    1. Your code should look like the following:
...
    1.      WebRoutine Name(Details)
           Web_
...
    1. Map For(*both)
...
    1.  Fields((
...
    1. #empno *hidden))
           Web_
...
    1. Map For(*both)
...
    1.  Fields(
...
    1. #empdata (
...
    1. #empskls *private))
...

    1.      Endroutine

  2. In this step you will add logic to your Details WebRoutine using a CASE loop for STDRENTRY (this is mapped globally as a hidden field).
...

  1. Note the following:
    • Field EMPNOW is shown on the Details web page as an output field. EMPNO is mapped as a hidden field and will be used for employee update. EMPNO is passed into the Details WebRoutine by the Anchor weblet.     
...

    • Code your Details WebRoutine based on the following:

    • Change EMPNOW to EMPNO
    • Case loop on STDRENTRY
    • When = D
    • Fetch fields in EMPDATA from file PSLMST with key EMPNO
    • Clear list EMPSKLS
    • Select EMPSKLS from file PSLSKL with key EMPNO
    • Add entry to EMPSKLS
    • Endselect
    • When = U
    • Update fields in EMPDATA in file PSLSMT with key EMPNO. Go to next statement on validation error.
    • If status is not OK, issue an error message
    • Else
    • Issue an "employee changed" message including employee number.
    • Endcase
...

    • Your code should look like the following:
...
    •      WebRoutine Name(Details)
           Web_
...
    • Map For(*both)
...
    •  Fields((
...
    • #empno *hidden))
           Web_
...
    • Map For(*both)
...
    •  Fields(
...
    • #empdata (
...
    • #empskls *private))
           Web_
...
    • Map For(*both)
...
    •  Fields((
...
    • #skilcode *hidden))
...

    •      #empnow := #empno
           Case (#stdrentry)
           When (= D)
           Fetch Fields(#empdata) From_File(pslmst)
...
    •  With_Key(#empno)
           Clr_
...
    • List Named(#empskls)
...

    •      Select Fields(#empskls)
...
    •  From_File(pslskl)
...
    •  With_Key(#empno)
           Add_
...
    • Entry To_List(#empskls)
...

    •      Endselect
           * update employee
           When (= U)
           Update Fields(#empdata) In
...
    • _File(pslmst)
...
    •  With_Key(#empno)
...
    •  Val_Error(*next)
           If_
...
    • Status Is_Not(*okay)
...

    •      Message Msgtxt('Error occurred on employee update')
           Else
           Message Msgtxt(' Employee ' + #empno + ' was changed')
           Endif
           Endcase
           Endroutine

  2. Compile your WAM and open the Details WebRoutine in the Design view.
...

  1. Your web page should look like the following:

    Image Modified
...

  2. Drag and drop a Tab Pages weblet (not Tab Pages (deprecated)) onto the page.

    Image Modified
...

    1. Click on the Tab Pages weblet to select it. On the Details tab set up its tabs properties by clicking on the Ellipsis
...
    1.  Image Added button, that will open the Design of… Properties dialog:

      Image Modified
...

    2. Select each tab page entry in the list and set up its properties:
      Property
      Value
      caption
      Details
      image
      icons/normal/16/folder_16.png
...
    1. Property
      Value
      caption
      Skills
      image
      icons/normal/16/contract_16.png
...
    1. Delete Tab Page 3.
...

    2. Save your changes by clicking OK.
...

  2. Click on the Tab Pages weblet to select it and set its height and width properties:
    Property
    Value
    content_width
    450px
    content_height
    400px
...


  2. Save your changes. Your page should now look like the following:

    Image Modified
...

  2. Click on a corner of the employees fields table to select it. Use the context menu to select Cut.
...

    1. Click on the Tab Pages weblet to select it.
...
    1. Click on the Details tab to ensure the correct tab sheet is selected.
...
    1. Use the context menu to Paste the table into the tab folder Details tab.
...

    1. Your page should now look like the following:

      Image Modified
...

  2. Save your changes.
...

  2. Click on the Skills tab to select it and drag and drop a jQuery Enabled Grid onto the Skills tab page.
...

  2. Select the Grid and set up its properties:
    Property
    Value
    Listname
    EMPSKLS
...


  2. Click on the Details tab page and save your changes. This will make Details, the default tab at run time.
...

  2. The Details web page will be displayed inside the Navigation Panel on the ShowPage web page. The Details web page therefore requires a blank layout.
...

    1. On the Favorites / Weblet Templates tab, using the dropdown at the top, select Layout Weblets:

      Image Modified
...
    1. Drag and drop the Simple blank 
...
    1. layout onto the page. Your design should now look like the following:

      Image Modified
...
  1. You need to ensure that this blank page adopts the same theme as your common layout iiilay01.
...

    1. On the Favorites / Weblet Templates tab, select Layout Weblets in the top dropdown list.
...
    1. Right click on the layout Workshop Layout and use the context menu to select Cross References:
...
    1. Image Modified
...
    1. Make a note of the Style External Resources being used. In this example these are XWT08J and XWT08L1.
...
    1. Close this dialog.
...
    1. In the Design view for WebRoutine Details, on the Design ribbon, select the External Resources button. Use the Add button to add the two Styles required.
      Image Modified
...
    1. Your Design should now look like the following, but refelecting your chosen theme:
      Image Modified
...
    1. Note the Font used for the field labels.
...
    1. Note also the background used for a non-selected tab. The color may not be shown in the Design view. Check your results in the next step.
...

  2. Save your changes.
...

  2. Execute the ShowPage WebRoutine in the browser to test your application:
    • Selecting an employee should display details on the right side of the Vertical Splitter. The Details tab will be shown initially, as it was saved as the default.
    • Selecting the Skills tab will display a grid of employee skills.
    • Selecting another employee will display the Details tab again.
     Later you will enhance the application to remember the current tab and display it for the next employee selected.