Creator Studio tutorial

Use this tutorial to create a Gift Card Request app to streamline the processes of providing recognition to a team.

Tutorial objectives

In this tutorial, you'll assume the following roles to create and deploy the app:

• As a marketing manager who is looking to streamline the processes of providing recognition to their team, you'll create the Gift Card Request app.
• As an application development administrator, approve and deploy the new app to a production environment.
• As a marketing manager, use your live app to submit a recognition request.

Tutorial scenario

You're a manager with a rapidly expanding team. To date, the team has exceeded its goals every quarter. You want to reward them and provide gift cards as part of that recognition. However, securing approval for monetary awards is an intricate process that can span hours and involve repetitive interaction with many systems and upper management.

To tackle this issue, you check in with the IT admin and confirm that you can create an app to request gift cards. The admin is happy to help you make a new end-to-end app that draws on existing business process knowledge. To enable this, the admin adds you to the Creator Studio Users group in their non-production instance.

注:

To complete this tutorial, you must log in to Creator Studio as two different users or impersonate two users: one in the Creator Studio Users group and one admin.

It's time for you to get started on creating a simple app.

Tutorial part 1: Create the app

Begin by creating an app from the Creator Studio home page.

始める前に

Role required: Creator Studio User

このタスクについて

You can also watch a short video on how to create an app.

手順

1. Go to All > App Engine > Creator Studio.

   図 : 1. Start Creator Studio

   

2. Select the Create app button.

   図 : 2. Create app button

   

   • If you're a system administrator, you can read more about this topic in Application collaboration.
   • If you want to know how to request an admin to create the app for you, check out Ask an admin to create an app for you in Creator Studio.
3. Select the type of app you want to build, such as Service Desk.
   Service Desk apps enable users to submit requests, report issues, and access support related to services within your company.

   注:

   Your admin may have hidden this page.

   図 : 3. Select the app type

   

4. Select the Continue button.
5. Enter the following values on the Create app page.

   表 : 1. Create app modal fields

   Field	Value
   Name	Gift Card Request
   Description	Request an internal or third party gift card for employee recognition.

   図 : 4. Add Gift card request app basic details

   

6. Select the Create app button.

次のタスク

Next, let's add a form to your app.

Tutorial part 2: Add a form

Adding a form enables people to make a request. Forms contain questions that people respond to when submitting a service desk request.

始める前に

Role required: Creator Studio User

手順

1. Select +Add form within the app.
   You can select +Add form in either the navigation panel or the app canvas.

   図 : 5. Start adding a form

   

2. Verify on the template page that the Creator Studio Default Template is selected.

   図 : 6. Select the template

   

3. Select the Apply template and continue button.
   Next, let's customize the form by adding questions.

Tutorial part 3: Customize the form

Customize the form for the gift card request app by manually entering questions. When it's done, you can mark the form as ready to be published.

始める前に

Role required: Creator Studio User

このタスクについて

You can also use Now Assist for Creator on the Build with Now Assist tab to customize a form. But for this tutorial, you will manually enter questions.

手順

1. Select the Build on your own tab.
2. Enter the following information for the form:

   表 : 2. Form detail values

   Field	Value
   Form name	Gift card request
   Short description	Request an internal or third party gift card for employee recognition.
   Long description	Looking for a great way to recognize your colleagues? Use this form to request a gift card to our internal company store or to a third party store of your choice!

   図 : 7. Enter form details

   

   注:

   This page enables you to specify details for your first form. You can also edit the form details, such as name and description, from inside the app after the form is generated.
3. Select the Save and edit form button.
   Next, we'll work on the contents of the form.
4. Add an icon to spiff up your form by selecting the icon and uploading an appropriate image.
   You can use any image that you like.

   図 : 8. Add an image

   

   1. Select the add image icon ().
   2. Search for and choose your image to add to the form.
5. Create your first question that enables users to order the gift card.
   1. Select Question 1.
   2. Enter the following values in the Question details panel that appears:

      表 : 3. Question 1 values

      Field	Value
      Question label	Company store gift card?
      Content type	Yes or no
      Show question on form	Select this option
      Mark as required	Select this option

      図 : 9. Add the first question

      

   3. Select the Save button.
6. Create the second question to specify the amount of the gift card.
   1. Select Question 2.
   2. Enter the following values in the Question details panel that appears:

      表 : 4. Question 2 values

      Field	Value
      Question label	Amount
      Content type	Leave selected as Single-line text
      Show question on form	Select this option
      Mark as required	Select this option

      図 : 10. Add the second question

      

   3. Select the Save button.
7. Create the third question that defines who the gift card recipient will be.
   1. Select Question 3.
   2. Enter the following values in the Question details panel that appears:

      表 : 5. Question 3 values

      Field	Value
      Question label	Recipient
      Content type	Record choices
      Show question on form	Select this option
      Source table	User (sys_user)

      図 : 11. Add the third question

      

   3. Select the Save button.
8. Add a fourth question so that users can enter a justification for the gift card.
   1. Drag the Multi-line text form element to add it to the form below the third question.
   2. Enter the following values in the Question details panel that appears:

      表 : 6. Question 4 values

      Field	Value
      Question label	Justification
      Content type	Leave as Multi-line text
      Show question on form	Select this option

      図 : 12. Add the fourth question

      

   3. Select the Save button.
9. Select Mark as ready to publish the form.
   When you finish editing a form, you mark it as ready, which puts it in the Published state. This version of the form then appears in its specified catalog of items.

   注:

   The published form appears only on the non-production instance where you're developing your app. You must request that your admin deploy the app to production for the form to appear in the catalog on the production instance.

   図 : 13. Mark a form as ready

   

10. Specify where users can access the form in the Service Catalog and Employee Center.
    1. Select the Edit location setting button.

       図 : 14. Edit location settings warning

       

    2. Select the Edit button to add the form to a Service Catalog topic.

       図 : 15. Form settings modal

       

    3. Select the catalog that represents the business area the app will use.
       For example, you can expand the Service Catalog and then select the Can we help you? category.

       図 : 16. Form settings modal catalogs

       

    4. Select the Apply button to save your changes.
    5. Select the Edit button to add the form to an Employee Center topic.

       図 : 17. Select topics in the Employee Center topic

       

    6. Choose the section of the Employee Center where the form will live.

       図 : 18. Select the Employee Center topic

       

11. Select the Apply button.
12. Select the Save all settings button to save your changes.

    図 : 19. Save all location settings

    

13. オプション: See how the form will look by selecting the Preview button.
    You can see a preview of the how the current version of the form will appear in various experiences by selecting Portal (such as Employee Portal), Now Mobile, or Virtual Agent. You can fill in the form when previewing, but selecting the Submit button doesn't generate a task record.

    図 : 20. Preview a form

    

Tutorial part 4: Add an automated playbook

Add a playbook that uses the form that you just created to automate approval for the gift card request app.

始める前に

Role required: Creator Studio User

手順

1. Select + Add automation for the Gift card request form.

   図 : 21. Select to add an automation

   

2. Enter the following values in the Create a playbook modal:

   表 : 7. Create a playbook modal values

   Field	Value
   Playbook name	Gift card approvals
   Description	Route approvals when a gift card is requested.
   Form	Make sure the name of the form that you created (Gift card request) is selected.
   Trigger	Leave the trigger as Form submitted.

   図 : 22. Enter playbook details

   

3. Select the Create button.
4. Add the manager approval activity.
   1. Select the add icon ().

      図 : 23. Add manager approval activity: Step 1

      

   2. Select the Add an activity icon ().

      図 : 24. Add manager approval activity: Step 2

      

   3. Select the Request approval activity.

      図 : 25. Add manager approval activity: Step 3

      

      The Request approval properties panel appears, where you can define the activity.
   4. Enter the following activity details.

      表 : 8. Manager approval activity detail values

      Field	Value
      Label	Request manager approval
      Requester's manager	Select this option.
      Approval type	Leave as Anyone approves.
      Conditions	Select When playbook starts.

      図 : 26. Request manager approval details

      

   5. Select Save and close.
5. Add the finance approval activity.
   1. Select the add icon ().

      図 : 27. Add finance approval activity: Step 1

      

   2. Select the add an activity icon ().

      図 : 28. Add finance approval activity: Step 2

      

   3. Select the Request approval activity.

      図 : 29. Add finance approval activity: Step 3

      

      The Request approval properties panel appears, where you can define the activity.
   4. Enter the following activity details.

      表 : 9. Finance approval activity detail values

      Field	Value
      Label	Enter Request finance approval.
      Group	Select this option.
      Group	Enter Finance group.
      Approval type	Leave as Anyone approves.
      Conditions	Leave as After specific activity with Request manager approval selected.

      図 : 30. Request finance approval details

      

   5. Select Save and close.
6. Activate the playbook so that it can run when the form is submitted by selecting the Activate button.

   図 : 31. Activate the playbook

   

タスクの結果

Great! You've finished adding a playbook. Next, you can customize the workspace configuration where fulfillers work on submitted requests.

Tutorial part 5: Customize the fulfillment workspace configuration

Customize the lists and submitted records in the workspace where fulfillers can process gift card requests from the. In this list customization, you add a column to view the assignment group.

始める前に

Role required: Creator Studio User

手順

1. Select the List configurations section in the navigation panel.

   図 : 32. List configurations in the navigation panel

   

2. Add the assignment group to the workspace.
   1. Select the Manage columns link in the Filtered list details panel.

      図 : 33. Manage columns link

      

   2. Search for Assignment group in the Available columns.
   3. Select the Assignment group.

      図 : 34. Manage the columns to add a column

      

   4. Select the Apply button.
   5. Select the Save button in the Filtered list details panel.

      図 : 35. Save changes to workspace configuration

      

タスクの結果

That's it, you've built an app! Now it's time to submit it for review and deployment.

Tutorial part 6: Test and submit the app for review

Test your app and then request that an admin review and deploy the app to production.

始める前に

A pipeline for deployment must be configured before you can submit the gift card app for review.

Role required: Creator Studio User

手順

1. Test how the app works to make sure that it's ready by selecting the Try it button.
   1. Select the Gift card request form from the navigation panel.

      図 : 36. Select the form to test it

      

   2. Select the Try it button.

      図 : 37. Try it button

      

   3. Complete the form by entering the following values for each field.

      表 : 10. Try it values for Gift card request form

      Field	Value
      Company gift store card?	Yes
      Amount	20.00
      Recipient	Choose a recipient from the list of people.
      Justification	Onboarding a cool new person for our team!

      図 : 38. Test the form

      

   4. Select the Submit button when you're done.
   After you submit your responses, the ServiceNow AI Platform runs any playbooks associated with the form.

   The record that your submitted form creates appears in Creator Studio. You can view the results of the playbooks and interact with the record to see how it appears in the Request App Workspace.

   図 : 39. View the submitted record

   

2. Select the Submit for review button.

   図 : 40. Submit an app for review

   

3. Select Continue on the Submit app for review modal.

   図 : 41. Start the submit for review process

   

4. Check the form to be reviewed for deployment in the Review request forms modal.
   1. Expand the Ready for review section.
   2. Ensure that the Visible to others option is selected for the Gift Card Request form.
   3. Select Continue.

   図 : 42. Check the form to be deployed

   

5. Check the form to be reviewed for deployment in the Review playbooks modal.
   1. Expand the Playbooks section.
   2. Ensure that the Run on production option is selected for the Gift card approvals form.
   3. Select Continue.

   図 : 43. Check the playbook to be deployed

   

6. Confirm that the information in the Review versioning modal is correct, and add the Release notes.

   図 : 44. Check and update release version and submit for review

   

7. Select Submit for review.

タスクの結果

Congratulations, you have created your gift card request app! Now your admin must review and deploy it.

図 : 45. Confirmation of review submission

Tutorial part 7: Admin deploys the app

Impersonate an admin to deploy the gift card request app that you created.

始める前に

If you can't impersonate an admin, ask your local admin to deploy the app for you.

Role required: admin

手順

1. In the ServiceNow AI Platform application banner, select your profile icon and impersonate an admin.
2. Navigate to All > App Engine > App Engine Management Center.
3. Select the number 1 in the Pending requests to complete section.

   図 : 46. Apps ready for deployment

   

4. Open the deployment record by selecting its Number.

   図 : 47. List of apps to deploy

   

5. Select the Approve button.

   図 : 48. Approve button for deployment

   

6. Select Save.
7. Reload the page.
8. Select the Approve and deploy app button.

   図 : 49. Approve and deploy button for deployment

   

9. Select the Deploy button.

   図 : 50. Deploy the app

   

タスクの結果

The app has been deployed to production. Select Show more in the activity section if you want to view details for the app.

図 : 51. Verify the deployment details

You can end the admin impersonation now.

Tutorial part 8: Use the app to request a gift card

Use the deployed gift card request app that you just created to request a gift card.

始める前に

Role required: ServiceNow AI Platform user

手順

1. Navigate to All > Self-Service > Employee Center.

   図 : 52. Open Employee Center

   

2. Search for Gift card request in the search bar.

   図 : 53. Search for the Gift card request app

   

3. Select the Gift card request app that appears in the search results.

   図 : 54. Open the app

   

4. Fill out the gift card request form to request a gift card.

   図 : 55. Request a gift card

   

5. Select the Submit button.

Tutorial part 9: Verify the gift card request

Verify that your app is working by checking the Request App Workspace to view the gift card request that you submitted.

始める前に

Role required: admin or the app's agent role, for example, x_snc_app_name.agent

手順

1. Navigate to All > Workspaces > Request App Workspace.

   図 : 56. Open the Request App Workspace

   

2. Find the gift card request that you submitted and select its Number to open it.
3. View the gift card request details.

   図 : 57. Gift card request details

   

タスクの結果

Hooray! You have completed the gift card request app tutorial.