Developer Student Guide

Liquid Templating

Table of Contents

Lesson: Liquid Templating 3

Exercise: Add Liquid to the Copy Page 3

Edit the copy of a Web Page 3

Add some basic Liquid content 4

Exercise: Create a new Snippet and render it using Liquid 5

Create a Snippet record 5

Edit the copy of a Web Page 5

Exercise: Add Liquid to a front-side-editable Snippet 7

Edit a Snippet through front-side editing 7

Add a greeting to the current user 7

Exercise: Add Liquid to a front-side-editable Snippet 8

Add a new Web Template Record in the CRM 8

Lesson: Web Forms

In this lesson, we will build some multi-step Web Forms, demonstrating a few example scenarios that could be relevant to implementations of Adxstudio Portals that you will come across.

Exercise: Set Up a Web Form

Here we will be creating essentially the same result as in the previous exercises, but using web forms. We will be using the same New Contact Us Web Form we created earlier.

In CRM:

1.  Create a New Web Page, Web Form, and Web Form Step for your lead (Contact Us) Form:

  1. Navigate to Portals > Community Portal > Web Pages
  2. Click New
  3. Give the web page the following values:
  4. Name: Contact Us Web Form
  5. Partial Url : contact-us-web-form
  6. Publishing State: published
  7. Page Template: Full Page
  8. Website: Community Portal
  9. Parent Page: Content
  10. Click Save but do not close the window

2.  Click to Open the Web Form lookup dropdown; so that you can associate the Contact Us form to the page

3.  Click New

4.  Specify a Name for the Web Form: “Contact Us”

5.  Click Save

6.  Click Start Step lookup button

7.  Click New, and give the step the follow values:

  1. Name: Load Contact Us Form
  2. Web Form: Contact Us
  3. Type: Load Form
  4. Target Entity Logical Name: lead
  5. Mode: Insert
  6. Form Name: New Contact Us Form
  7. Success Message: Thank you for contacting us.

8.  Click Save & Close and close the Contact Us web form window

9.  Note that the Contact Us Web Form Web Page is now populated with the appropriate web form. You may now close this window as well

Let’s try out the form in the portal:

1.  Navigate to the Community Portal website

2.  Navigate to the Web Form Contact Us page on the portal. You should now see a form resembling the one you created in CRM.

3.  Fill out the form and ensure a lead gets created in the CRM.

Exercise: Set up a Survey

In CRM, We will be creating a new entity that represents a survey we will be presenting to users via the portal. This is represented by an entity in the CRM containing the questions for the survey. This means that the entity itself represents the specific survey, while the records created by the web form submission represent survey submissions.

Create the Survey Entity in CRM

1.  Login to CRM

2.  Navigate to Settings

3.  Click Customizations

4.  Click Customize the System

5.  Click New > Entity

6.  Fill in the required fields:

  1. Choose a name the reflects this is a survey: Example Support Survey
  2. Plural Name: Example Support Surveys
  3. Logical Name: new_examplesupportsurvey
  4. Set the entity to display in the Sales area of the site map

7.  Click Save

Now we add our questions to the survey

8.  Click Fields

9.  Add Fields representing questions:

a.  Add a Text Area Question

  1. Click New
  2. Set the Name to “Description”
  3. Logical name: new_description
  4. Choose Multiple Lines of Text for the Type

v. Save & Close

b.  Add a Text Question

  1. Click New
  2. Name: “Your Name”
  3. Logical name: new_yourname
  4. Choose Single Line of Text for the Type

v. Save & Close

c.  Add a True/False Question

  1. Click New
  2. Name: “Gold Star”
  3. Logical name: new_goldstar
  4. Choose Two Options as the Type

v. Save & Close

d.  Add a Multiple Choice Question

  1. Add a series of fields, each one representing an answer to the question you have planned (“How may we contact you?”) The actual question will be the LABEL of the section on the form.
  2. Click New
  3. Name: “Email”
  4. Logical name: new_mc1_email
  5. Choose Two Options as the Type
  6. Save & Close
  7. Click New
  8. Name: “Phone”
  9. Logical name: new_mc1_phone
  10. Choose Two Options as the Type
  11. Save & Close
  12. Click New
  13. Name: “Fax”
  14. Logical name: new_mc1_fax
  15. Choose Two Options as the Type
  16. Save & Close

e.  Add a Likert Scale Question

  1. Click New
  2. The Name for the question: “Quality Rating”
  3. Logical Name: new_qualityrating
  4. Select the Option Set Type
  5. Choose Use an Existing Option Set

vi.  Choose Likert Scale Quality

  1. Save & Close

10.  We will also add a field that will record the current portal user.

  1. Click New
  2. Display Name: Regarding Contact
  3. (Logical) Name: new_regardingcontact
  4. Type: Lookup
  5. Target Record Type: Contact
  6. Relationship Name: new_contact_customersupportsurvey
  7. Save & Close

11.  From the Customer Support entity you have just created (either the window that is still open or, if you closed it – by navigating to the entity in the solution window) Click Forms; it is now time to create the CRM forms that will be rendered to display the survey

12.  Open the Information form.

13.  Some changes need to be made to this form so that it will look good with adxstudio’s Out-of-the-box CSS styling. We need to utilize a two-column layout as was the standard in CRM 2011.

14.  Select the General Tab by clicking on it and then click Change Properties

15.  Click Formatting and then select One column

16.  Click OK

17.  Click the Insert tab then choose to insert a new two-column section to the General tab

18.  Move the Name and Owner Fields into this now section and delete the old one

19.  Make the Name field read-only and invisible on the form

  1. Select it by clicking on it
  2. Click Change Properties
  3. Choose to make the field Read Only and Uncheck “Visible by default”
  4. Click OK

20.  Click Save

21.  Click Save As and save it as Survey Step 2

22.  Click Save As and save it as Survey Step 1

First we will edit the form for step 1 of the survey

23.  Add the text area and true/false question to the form, in a layout that you desire:

  1. Drag and Drop the Description field onto the form
  2. Click on it and click Properties
  3. Set the label to “Please give a description of the problem you contacted us for”
  4. Click OK
  5. Drag and Drop the Your Name field onto the form
  6. Click on it and click Properties
  7. Set the label to “What is your Name?”
  8. Drag and drop the Gold Star field onto the form
  9. Click on it and click Properties
  10. Set the label to “Are you a gold star member?”

24.  Arrange the fields on the form so that the form has a nice layout.

25.  Save & Close the form

Now we will edit the form for Step 2

26.  Click to open the Survey Step 2 form

27.  Drag and drop the Quality Rating field onto the form

28.  Click on it and click properties

29.  Set the label to “Please Rate the quality of service you received from us”

30.  Click OK

31.  Add the multiple choice question:

  1. Click the Insert tab above the ribbon
  2. Click for a Two-Column section
  1. Double-click on the newly created section
  2. Set the Label of this section to be: “How may we contact you?”
  3. Click Show the label of this section on the Form
  1. Click OK
  2. Add each response to this question you created earlier to this section:
  3. Drag and drop the ‘Email’ field onto the form
  4. Double-click on it or select it and click properties
  5. Click Formatting
  6. Select Check Box as the Control Formatting
  7. Click OK
  1. Drag and drop the ‘Fax’ field onto the form
  2. Double-click on it or select it and click properties
  3. Click Formatting
  4. Select Check Box as the Control Formatting
  5. Click OK
  6. Drag and drop the Phone field onto the form
  7. Double-click on it or select it and click properties
  8. Click Formatting
  9. Select Check Box as the Control Formatting
  10. Click OK
  1. Arrange the form nicely
  2. Save & Close

32.  Click on the Form Order and choose Main Form Set

33.  Move the Information form to the top

34.  Click OK

Now we edit the main information form so we can view the results later.

35.  Open the Information Form

36.  Add Notes to the Form:

  1. Click Insert > One Colum Tab
  2. Set the name of the new tab to Notes (double click to access its properties)
  3. Select the Notes Tab
  4. Click Insert > Notes

37.  Add the text area and true/false question to the form, in a layout that you desire (place all fields into the General Tab):

  1. Drag and Drop the Description field onto the form
  2. Click on it and click Properties
  3. Set the label to “Please give a description of the problem you contacted us for”
  4. Click OK
  5. Drag and Drop the Your Name field onto the form
  6. Click on it and click Properties
  7. Set the label to “You Name?”
  8. Drag and drop the Gold Star field onto the form
  9. Click on it and click Properties
  10. Set the label to “Are you a gold star member?”

38.  Drag and drop the Quality Rating field onto the form

39.  Click on it and click properties

40.  Set the label to “Please Rate the quality of service you received from us”

41.  Add the multiple choice question:

  1. Click the Insert tab above the ribbon
  2. Click for a Two-Column section
  3. Double-click on the newly created section
  4. Set the Label of this section to be: “How may we contact you?”
  5. Click Show the label of this section on the Form
  6. Click OK
  7. Add each response to this question you created earlier to this section:
  8. Drag and drop the ‘Email’ field onto the form
  9. Double-click on it or select it and click properties
  10. Click Formatting
  11. Select Check Box as the Control Formatting
  12. Click OK
  13. Drag and drop the ‘Fax’ field onto the form
  14. Double-click on it or select it and click properties
  15. Click Formatting
  16. Select Check Box as the Control Formatting
  17. Click OK
  18. Drag and drop the Phone field onto the form
  19. Double-click on it or select it and click properties
  20. Click Formatting
  21. Select Check Box as the Control Formatting
  22. Click OK

42.  Finally, add the Regarding Contact Lookup field to the form, so we know who wrote the survey. Place this field close to the Top:

43.  Save & Close

44.  Click Publish All Customizations

Create the Web Form Data

Now that the Entity and the CRM forms have been created, we can create the web form data for our survey and associate the survey with a web page so that it shows up on our portal. Let the instructor know if at any point you get lost during this process.

45.  Navigate to Portals > Community Portal > Web Pages

46.  Click New

47.  Give the web page the following values:

  1. Name: Example Support Survey
  2. Partial Url : support-survey
  3. Publishing State: Published
  4. Website: Community Portal
  5. Parent Page: Content
  6. Page Template: Full Page
  7. Click Save but do not close the form

48.  Click to Open the Web Form lookup dropdown – we will add the web form to the page (if you closed the web page form, you can create the web form first then later add it to this web page by re-opening it)

49.  Click New to create a new web form.

50.  Specify a Name for the Web Form: “Example Support Survey”

51.  Set Multiple Records Per User Permitted to “No”

52.  Set Authentication Required to “Yes”

53.  Click Save (but do not close the form – we aren’t done yet!)

54.  Click Start Step lookup button

55.  Click New, and give the step the follow values:

  1. Name: Survey Step 1
  2. Type: Load Form
  3. Entity Logical Name: Example Support Survey (new_examplesupportsurvey)
  4. Mode: Insert
  5. Form Name: Survey Step 1
  6. Associate Current Portal User: True (check it)
  7. Target Entity Portal User Lookup Attribute: Regarding Contact (new_regardingcontact)

56.  Click Save but once again, don’t close the window!

57.  Click Next Step lookup button

58.  Click New, and give the step the follow values:

  1. Name: Survey Step 2
  2. Type: Load Form
  3. Web Form: Example Support Survey
  4. Entity Logical Name: Example Support Survey (new_examplesupportsurvey)
  5. Mode: Edit
  6. Source Type: Result From Previous Step
  7. Form Name: Survey Step 2
  8. Success Message: “Thank you for your submission”
  9. Note that CRM 2013 might at this point decide to assign survey Step 1 as the Next Step for this step – this is wrong and is a bug with CRM. Please ensure that this field is BLANK:

j.  Save (don’t close it – we are going to add a related entity)

59.  Click Metadata from the Survey Step 2 left navigation

60.  Click Add New Web Form Metadata

61.  Specify the Attribute Logical Name to be the logical name of the Likert scale question you created: new_qualityrating

62.  Select Option Set as Horizontal Radio Button List from the style dropdown, Control Style section

63.  Click Save & Close or OK all windows that remain open

Portal

64.  You may need to reset the cache in Demo builder for your survey to appear properly:

65.  Navigate to the portal

66.  Sign in as administrator

67.  You may now take the survey, navigate to the URL you specified for your survey and take the survey.

View Survey Results

In CRM

68.  Navigate to Sales

69.  Navigate to Example Support Surveys

70.  Locate the survey submission you just created and open it

71.  From here you can view the results of the survey by reading the form.

Experiment

1) Attempt adding more and different question types, Web Forms Steps, and metadata to your survey.

2) What sorts of processes would you build to surround this survey? What sorts of workflows would be appropriate? How would the survey be distributed? How would the data be used? Jot down some ideas.

3) Try Creating a Report in CRM to view the results of the survey. What’s the best way to create a meaningful report? Any limitations?

17