Customize a Predefined Form

This scenario illustrates how Service Managers create a form by copying a predefined form and customizing the copy. You add fields and specify some fields to be auto-populated. You use spinner fields and radio buttons so that users can specify only valid options. You also show or hide fields according to the options selected by the user. Creating form in this manner helps reduce user errors and helps increase efficiency.
casm171
This scenario illustrates how Service Managers create a form by copying a predefined form and customizing the copy. You add fields and specify some fields to be auto-populated. You use spinner fields and radio buttons so that users can specify only valid options. You also show or hide fields according to the options selected by the user. Creating form in this manner helps reduce user errors and helps increase efficiency.
This scenario focuses on the onboarding of a new employee into the Lab Services group in your organization. You can use this scenario
 as a model
 to create a form using similar techniques.
For other use cases, search the 
Catalog
Forms
 folder for the form that most closely matches the form that you want to create. 
Example:
 To create a form for ordering hardware, review the Procure New Hardware form in the IT Support Services subfolder.
 Service Managers typically have one or more of the following roles in CA Service Catalog: Service Delivery Administrator, Services Manager, Super Business Unit Administrator, and Catalog Administrator.
 
Follow these steps:
 
 
 
 We recommend that you do not create multiple forms with the same _id value for each form. If you already have multiple forms with the same _id value, do not associate such forms to a single Service Option. Having multiple forms with the same _id value in a single Service Option can cause validation errors.
Step 1 - Review and Copy the Form
All services include at least one predefined or custom form to record essential information from the user requesting the service. In this scenario, you review and copy the predefined form included with the standard New Hire Onboarding service. Afterwards, you modify the copied form for use by the New Hire Onboarding for Lab Services group.
 
Follow these steps:
 
  1. Click 
    Catalog
    Forms
    .
  2. Expand 
    Forms
    CA Catalog Content
     in the Component Tree.
  3. Select 
    New Hire Onboarding
    .
  4. Click Copy.
  5. Move the top level of the Forms folder and complete these actions:
    1. Click 
      Add
       and create a subfolder and call it Custom.
    2. Select the Custom folder and click Paste.
      The form is copied, and its new name is "copy of 
      original name.
      " The copied elements under the copied form are 
      not 
      renamed.
       If you copy the form from one business unit to another, the pasted form, including all elements under it, belong to the business unit of the destination folder.
    3. Select the form and click Rename.
    4. Enter the new name as New Hire Onboarding for Lab Services. Click OK.
     The name must be unique within its business unit.
  6. Specify new_hire_onboard_labservices in the _id attribute for the form, press Enter, and click Save.
     After you specify a new value for any attribute, press Enter to enable the Save button. This value of the _id attribute of the form is the form ID. Specify a unique ID for each form in a business unit.
Step 2 - Add Fields for Contact Information
Modify the form that you copied in the previous procedure by adding more contact information fields. These new fields increase the options for other employees to communicate with the Lab Services employees.
 
Follow these steps:
 
  1. Expand the New Hire Onboarding for Field Lab Services form.
    The list of components in the form appear in the tree under the form name. This list matches the same named components in the middle pane.
  2. Copy the Last Name field, to create another field, as follows:
    1. Select the Last Name field in the tree, and click the Copy icon. 
    2. Select the name of the New Hire Onboarding for Lab Services form in the tree, and click Paste.
    3. In the _id attribute in the right pane, specify a unique ID. For example, employee_id. Press Enter and click Save.
  3. Rename the new field, as follows:
    1. Select the field and click Rename.
      The Name dialog appears.
    2. Enter the new name as Employee ID. Click OK.
  4. Move the Employee ID field, as follows:
    1. Select the name of the field in the tree.
    2. Drag it upwards until the horizontal line for the field appears above the Job Title field, and drop it.
    3. Verify that the First Name, Last Name, and Employee ID fields now appear sequentially in the tree.
  5. Using steps 2-4 as a model, add the following new fields and move them under the Employee ID field:
    • Email
    • Phone number
    • Address
You have added more fields for contact information.
Step 3 - Configure Fields to be Populated Automatically
Use JavaScript expressions to retrieve the data from the user database and populate the fields automatically to reduce errors and increase efficiency.
 
Follow these steps:
 
  1. Expand the Forms tree to display the fields of the New Hire Onboarding for Lab Services Only form.
  2. Specify the following JavaScript expressions in the Value attributes of the following fields. Press Enter and click Save after you specify each value.
    • First name: $(_.user.firstName)
    • Last name: $(_.user.lastName)
    • Employee ID: $(_.user.id)
    • Email: $(_.user.email)
    • Phone: $(_.user.phone[0])- Primary phone
                   $(_.user.phone[1])- Secondary phone
    • Address: $(_.user.address)
When a catalog user opens this form while requesting a service, these fields are automatically populated based on the user ID specified at login.
Step 4 - Copy and Modify Radio Buttons
You can add radio buttons to the New Hire Onboarding for Lab Services Only form to allow users to select the type of server. Copying and modifying the radio buttons is more efficient than creating them. Therefore, you copy the radio buttons from the Procure Sun Server form and modify them for this form.
 
Follow these steps:
 
  1. Expand 
    CA Catalog Content
     in the Forms tree and perform these actions:
    1. Expand 
      Procure Server
       and 
      Procure Sun Server
      .
    2. Select the Choose Server Model field and click the Copy icon.
    3. Navigate the Forms tree to the New Hire Onboarding for Lab Services Only form. Select this form and click the Paste icon.
  2. Move the Choose Server Model field, as follows:
    1. Select the name of the field in the tree.
    2. Drag it upwards until the horizontal line for the field appears above the Additional Info field, and drop it.
    3. Verify that the Hiring Manager, Choose Server Model, and Additional Info fields now appear sequentially in the tree, followed by the other fields.
    4. Verify that the Choose Server Model field includes these options Starter, Mid Size, and High End.
     The values for _id and other attributes for these fields are already set, because you copy them rather than create them. We use the same attribute values in this scenario because the values remain unique within the same form.
Step 5 - Add Text Areas
Add a text area to provide specifications for each type of server. 
 
Follow these steps:
 
  1. Verify that the New Hire Onboarding for Lab Services Only form is displayed in the Preview Pane.
  2. Click 
    Components
    System
     in the Form tree.
  3. Drag and drop the the Text Area element to your form directly above the Additional Info field.
  4. Verify that the text area appears above the Additional Info field in the Preview Pane.
  5. Select the Text Area in the tree and click the 
    Rename
     button. Specify the new name as Starter.
  6. Specify these values for the following attributes. After you specify each value, press Enter and click Save.
    • _id: starter_description
    • Value: 10K (ULTRA 10000, Starfire) UltraSPARC® processor
    • Disabled: true
      This setting means that this field is read-only, so that users 
      cannot 
      change the text that you specified.
    • Hidden: false
  7. Repeat the previous steps for the next two text areas: Mid Size and High End. Use the following specifications for the attributes:
    Mid Size Text Area:
    • Name: Mid Size
    • _id: midsize_description
    • Value: 20K UltraSPARC IV & UltraSPARC III Processors
    • Disabled: true
    • Hidden: true
    High End Text Area:
    • Name: High End
    • _id: highend_description
    • Value:  E25K UltraSPARC IV & UltraSPARC III Processors
    • Disabled: true
    • Hidden: true
  8. Verify that the three Text Area fields appear on the form before the Additional Info field.
Step 6 - Show and Hide Text Areas
Add JavaScript functions to the form so that 
only 
the description of the selected server type (Starter, Mid Size, or High End) appears. If the user selects a new server type, the previous description is replaced with the description for the new selection. This enhancement helps save time for the user by eliminating the need to scroll through multiple static descriptions. This reduced scrolling is especially helpful for mobile users.
 
Follow these steps:
 
  1. Select the New Hire Onboarding for Lab Services Only form in the Preview Pane.
  2. Click the Script icon at the top of the form and proceed as follows:
    1. Delete the existing sample code.
    2. Copy and paste the JavaScript code from the section that is named JavaScript for New Hire Onboarding for Lab Services into the Script dialog.
    3. Save the script, and close the dialog.
  3. Expand the form to show the fields for the Choose Server Model radio buttons.
  4. Enter the following JavaScript function call in the onClick attribute of the Starter, Mid Size, and High End fields. After you update the attribute for each field, press Enter and click Save.
    ca_fd.js.onFormLoad();
    This call loads the JavaScript code that you copied earlier to the Script dialog for the form.
 
JavaScript for New Hire Onboarding for Lab Services
 
{ onFormLoad : function() { ca_fd.js.clickStarter(); ca_fd.js.clickMidSize(); ca_fd.js.clickHighEnd(); }, // ShowFields/HideFields either shows or hides the description field for Starter servers when Starter radio is changed // ResetFields will reset MidSize and HighEnd when selected and clicked away from Starter // This function is called in to Starter radio's onChange clickStarter : function() { if (ca_fdIsSelectRadio('new_hire_onboard_labservices','class','starter')) { ca_fdShowField('new_hire_onboard_labservices','starter_description'); } else { ca_fdHideField('new_hire_onboard_labservices','starter_description'); ca_fdResetFields('new_hire_onboard_labservices',['starter_description']); } }, // ShowFields/HideFields will either show or hide the description field for Mid Size servers when MidSize radio is changed // ResetFields will reset the description field for Mid Size servers when selected and clicked away from MidSize // This function is called in to MidSize radio's onChange clickMidSize : function() { if (ca_fdIsSelectRadio('new_hire_onboard_labservices','class','midsize')) { ca_fdShowField('new_hire_onboard_labservices','midsize_description'); } else { ca_fdHideField('new_hire_onboard_labservices','midsize_description'); ca_fdResetFields('new_hire_onboard_labservices',['midsize_description']); } }, // ShowFields/HideFields will either show or hide the description field for High End servers when HighEnd radio is changed // ResetFields will reset hide the description field for High End servers when selected and clicked away from HighEnd // This function is called in to HighEnd radio's onChange clickHighEnd : function() { if (ca_fdIsSelectRadio('new_hire_onboard_labservices','class','highend')) { ca_fdShowField('new_hire_onboard_labservices','highend_description'); } else { ca_fdHideField('new_hire_onboard_labservices','highend_description'); ca_fdResetFields('new_hire_onboard_labservices',['highend_description']); } }, }
Step 7 - Add Spinner Fields
As a best practice, configure each form so that users can specify only a valid number of items. This practice helps reduce errors. To implement this practice, the form uses a spinner to field to let users request 0-10 servers of each type.
 
Follow these steps:
 
  1. Verify that the New Hire Onboarding for Lab Services Only form is displayed in the Preview Pane.
  2. Click 
    Components
    System
     in the Form tree.
  3. Drag and drop the Spinner Field element to your form directly above the Additional Info field.
  4. Verify that the Spinner Field appears above the Additional Info field in the Preview Pane.
  5. Select the Spinner Field in the tree and click the 
    Rename
     button. Specify the new name as Number of Starter Servers.
  6. Specify these values for the following attributes. After you specify each value, press Enter and click Save.
    • Maximum Value: 10
    • Minimum Value: 0
    • Increment: 1
  7. Repeat the previous steps for the next two fields: Mid Size and High End.
    Letting users specify 0-10 of each type of server provides flexibility for users. To prevent users from specifying 0 for all three types, specify a value of 1 or higher as the default value of one field.
  8. Verify that the three spinner fields appear on the form before the Additional Info field.
Step 8 - Test the Form in a Service
Test the form before you make the form available in a service. 
 
Follow these steps:
 
  1. Select the service to which you want to add the form.
  2. Add the form to a service option group in that service.
  3. Verify that the service is available.
  4. View the service in the catalog, complete the form, and submit the request.
  5. Verify the specifications if you detect any errors.
    For example, if the text areas do not show or hide as planned, verify that the related JavaScript code and attributes are correct.