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.

Remarque :

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.

Avant de commencer

Role required: Creator Studio User

Pourquoi et quand exécuter cette tâche

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

Procédure

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

   Figure 1. Start Creator Studio

   

2. Select the Create app button.

   Figure 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.

   Remarque :

   Your admin may have hidden this page.

   Figure 3. Select the app type

   

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

   Tableau 1. Create app modal fields

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

   Figure 4. Add Gift card request app basic details

   

6. Select the Create app button.

Que faire ensuite

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.

Avant de commencer

Role required: Creator Studio User

Procédure

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

   Figure 5. Start adding a form

   

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

   Figure 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.

Avant de commencer

Role required: Creator Studio User

Pourquoi et quand exécuter cette tâche

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.

Procédure

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

   Tableau 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!

   Figure 7. Enter form details

   

   Remarque :

   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.

   Figure 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:

      Tableau 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

      Figure 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:

      Tableau 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

      Figure 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:

      Tableau 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)

      Figure 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:

      Tableau 6. Question 4 values

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

      Figure 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.

   Remarque :

   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.

   Figure 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.

       Figure 14. Edit location settings warning

       

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

       Figure 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.

       Figure 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.

       Figure 17. Select topics in the Employee Center topic

       

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

       Figure 18. Select the Employee Center topic

       

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

    Figure 19. Save all location settings

    

13. Facultatif : 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.

    Figure 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.

Avant de commencer

Role required: Creator Studio User

Procédure

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

   Figure 21. Select to add an automation

   

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

   Tableau 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.

   Figure 22. Enter playbook details

   

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

      Figure 23. Add manager approval activity: Step 1

      

   2. Select the Add an activity icon ().

      Figure 24. Add manager approval activity: Step 2

      

   3. Select the Request approval activity.

      Figure 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.

      Tableau 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.

      Figure 26. Request manager approval details

      

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

      Figure 27. Add finance approval activity: Step 1

      

   2. Select the add an activity icon ().

      Figure 28. Add finance approval activity: Step 2

      

   3. Select the Request approval activity.

      Figure 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.

      Tableau 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.

      Figure 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.

   Figure 31. Activate the playbook

   

Résultats

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.

Avant de commencer

Role required: Creator Studio User

Procédure

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

   Figure 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.

      Figure 33. Manage columns link

      

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

      Figure 34. Manage the columns to add a column

      

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

      Figure 35. Save changes to workspace configuration

      

Résultats

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.

Avant de commencer

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

Role required: Creator Studio User

Procédure

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.

      Figure 36. Select the form to test it

      

   2. Select the Try it button.

      Figure 37. Try it button

      

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

      Tableau 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!

      Figure 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.

   Figure 39. View the submitted record

   

2. Select the Submit for review button.

   Figure 40. Submit an app for review

   

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

   Figure 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.

   Figure 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.

   Figure 43. Check the playbook to be deployed

   

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

   Figure 44. Check and update release version and submit for review

   

7. Select Submit for review.

Résultats

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

Figure 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.

Avant de commencer

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

Role required: admin

Procédure

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.

   Figure 46. Apps ready for deployment

   

4. Open the deployment record by selecting its Number.

   Figure 47. List of apps to deploy

   

5. Select the Approve button.

   Figure 48. Approve button for deployment

   

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

   Figure 49. Approve and deploy button for deployment

   

9. Select the Deploy button.

   Figure 50. Deploy the app

   

Résultats

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

Figure 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.

Avant de commencer

Role required: ServiceNow AI Platform user

Procédure

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

   Figure 52. Open Employee Center

   

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

   Figure 53. Search for the Gift card request app

   

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

   Figure 54. Open the app

   

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

   Figure 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.

Avant de commencer

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

Procédure

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

   Figure 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.

   Figure 57. Gift card request details

   

Résultats

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