Grid Page Controls for Employees


Concept

During this topic you will review the grid page controls.


Steps:

  1. Click the Sign In button.

    Step 1

  2. To navigate CONNECT you have the cascading Main Menu. For this example let's look at the main menu navigation to the Personal Information Summary page.

     

    Click the Main Menu button.

    Step 2

  3. Click the Self Service menu.

    Step 3

  4. Click the Personal Information menu.

    Step 4

  5. This is the path to access the Personal Information Summary page using the main menu. This page is part of the Self-Service component for employee transactions.

    Step 5

  6. On the home page we also include an Employee Self-Service Links pagelet for easy access to employee commonly used pages.

    Step 6

  7. Click the Personal Information Summary link.

    Step 7

  8. Personal Information Summary page contains all the personal information available for the employee. This page includes: Name, Home/Mailing Address, Phone Numbers, Emails, etc.

    Step 8

  9. All section details are displayed by default.

    To be able to view all section titles we will need to collapse them.

    Step 9

  10. Click the Collapse All link to view section titles only.

    Step 10

  11. Notice how all the sections are now collapsed and we are able to see them quickly.

    Step 11

  12. To view the contents of a section click the Expand section button.

    Step 12

  13. Click the Expand section link.

    Step 13

  14. To hide the contents of a section click the Collapse section link.

    Step 14

  15. You can always use the Expand All or Collapse All links.

    Step 15

  16. Grids look similar to a spreadsheet with column headings, rows, and cells. The cells are equivalent to fields.

    Step 16

  17. For this example we will make some changes to the Emergency Contacts.

     

    Click the Change Emergency Contacts button.

    Step 17

  18. Fields within a grid may be represented as edit boxes, list box, check box, and radio button or prompt button (for example: pencil and trash can icons).

    Step 18

  19. To edit the details of the emergency contact click the Edit button.

    Step 19

  20. Now in the Emergency Contact Detail page, notice how the information previously provided is displayed. For this example we will make an edit to the phone number.

    Step 20

  21. Click in the Phone Number field.

    Step 21

  22. The last digit is incorrect.

    Press [Backspace] to delete.

    Step 22

  23. Enter "4".

    Step 23

  24. Scroll down to the bottom of the page.

    Step 24

  25. Click the Save button.

    Step 25

  26. Most transactions are processed quickly, but the system will always display a Saving... or Saved message on the top right corner to let you know what is happening.

    Step 26

  27. A save confirmation message indicates the edit was successfully saved. Click the OK button.

    Step 27

  28. For this next example we will add a new emergency contact.

     

    Click the Add Emergency Contact button.

    Step 28

  29. Some fields on a page are required, meaning that you must enter a value in the field before you can save the page. The asterisks (*) next to the Contact Name, Relationship to Employee, and Phone Type fields indicate that these are required fields.

    Step 29

  30. Click in the Contact Name field.

    Step 30

  31. Enter "Charlie Martin" into the Contact Name field.

    Step 31

  32. To view and select from the predefined list of options click the Relationship to Employee list box.

    Step 32

  33. List menus will display all options available in the system.

     

    Click the Sibling list item.

    Step 33

  34. Click to scroll down to the bottom of the page.

    Step 34

  35. Click the Add Phone Number button.

    Step 35

  36. Notice the Phone Type field includes an asterick (*) indicating it is a required field.

     

    Click the Phone Type list menu.

    Step 36

  37. Click the Mobile list item.

    Step 37

  38. Click in the Phone Number field.

    Step 38

  39. Enter "787-743-9438" into the Phone Number field.

    Step 39

  40. Click the Save button.

    Step 40

  41. Click the OK button.

    Step 41

  42. Notice now there are two emergency contacts available. You may choose to change the Primary Contact here by selecting the check box and then saving the change.

    A check box is a small square box that turns an option on or off. Select the box to add a check mark and the option is on. Remove the check and the option is off.

    Step 42

  43. Click the Save button.

    Step 43

  44. Click the Return to Personal Information link to return to that page.

    Step 44

  45. We use the navigation path to navigate to the timesheet page.

     

    Click the Self Service button.

    Step 45

  46. Click the Time Reporting menu.

    Step 46

  47. Click the Report Time menu.

    Step 47

  48. Click the Timesheet menu.

    Step 48

  49. There are various types of timesheets and your timesheet may be different than the one used for this example, which is a Punch Time timesheet.

    Step 49

  50. Notice there are required fields by the use of the asterisk (*). Also, notice the structure of the fields is based on a grid with columns and rows.

    Step 50

  51. For this week the punch time timesheet provides a Comments, In, Lunch, In, Out, etc. data fields per day of the week. Each day is in its own data row.

    Step 51

  52. Click the Time Reporting Code list box.

    Step 52

  53. A list box is a field similar to an edit box, but with a down arrow within the box. Click the down arrow to display a list of values from which you can select a single option.

     

    Click the Time Reporting Code list.

    Step 53

  54. An edit box with prompt button uses a Lookup button, which is a magnifying glass icon, and can be used to look up a valid value for the field. It opens a modal prompt window that enables you to search the database for the data you need.

    Step 54

  55. At the end of each row there are Add a Row (+) and Delete a Row (-) buttons.

    Step 55

  56. Click to scroll the page left.

    Step 56

  57. Click the bar to scroll down to the bottom of the page.

    Step 57

  58. Below the timesheet you have view access to the Reported Time Summary, Absence and Exceptions details.

    Another type of grid is a component tab menu. These grids provide a means of viewing multiple columns of information without having a horizontal scroll to view them.

    Step 58

  59. Click the Absence tab.

    Step 59

  60. Notice that different columns are displayed.

    Step 60

  61. Anytime there is a question mark (?) next to a section, this is embedded help, there is more information avaialble to help you understand what that section is about.

     

    Click the Help button.

    Step 61

  62. Click the Close button.

    Step 62

  63. Click the Summary tab.

    Step 63

  64. Use the Zoom button to view the section in a separate window.

     

    Click the Zoom Reported Time Summary link.

    Step 64

  65. Click the Return button.

    Step 65

  66. Click to scroll to the top of the page.

    Step 66

  67. A dashed underline indicates availability of a mouse over popup page.

     

    Click the Ricky Martin object.

    Step 67

  68. When you click or mouse over the additional information about an employee appears in a popup window. The popup window disappears when you move the mouse away.

    Step 68

  69. You may have additional actions link that are accessible here.

     

    Click the Actions link.

    Step 69

  70. You have completed the review of Grid Page Controls.

    Click the Home link.

    Step 70

  71. Click the Sign out link.

    Step 71

You have successfully completed the review of Grid Page Controls for Employees.

Table of Contents  Start Topic