Developer Student Guide

Liquid Templating

Table of ContentsLesson: 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:

a. Navigate to Portals > Community Portal > Web Pagesb. Click Newc. Give the web page the following values:

i. Name: Contact Us Web Formii. Partial Url : contact-us-web-form

iii. Publishing State: publishediv. Page Template: Full Pagev. Website: Community Portal

vi. Parent Page: Contentd. 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 Save6. Click Start Step lookup button

3

7. Click New, and give the step the follow values:a. Name: Load Contact Us Formb. Web Form: Contact Usc. Type: Load Formd. Target Entity Logical Name: leade. Mode: Insertf. Form Name: New Contact Us Formg. Success Message: Thank you for contacting us.

8. Click Save & Close and close the Contact Us web form window9. 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 website2. 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.

4

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 CRM2. Navigate to Settings3. Click Customizations4. Click Customize the System5. Click New > Entity

6. Fill in the required fields:a. Choose a name the reflects this is a survey: Example Support Surveyb. Plural Name: Example Support Surveysc. Logical Name: new_examplesupportsurveyd. Set the entity to display in the Sales area of the site map

7. Click Save

5

Now we add our questions to the survey

8. Click Fields

9. Add Fields representing questions:a. Add a Text Area Question

i. Click Newii. Set the Name to “Description”

iii. Logical name: new_descriptioniv. Choose Multiple Lines of Text for the Typev. Save & Close

b. Add a Text Questioni. Click New

ii. Name: “Your Name”iii. Logical name: new_yournameiv. Choose Single Line of Text for the Typev. Save & Close

c. Add a True/False Questioni. Click New

ii. Name: “Gold Star”iii. Logical name: new_goldstariv. Choose Two Options as the Typev. Save & Close

d. Add a Multiple Choice Questioni. 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.

ii. Click Newiii. Name: “Email”iv. Logical name: new_mc1_emailv. Choose Two Options as the Type

vi. Save & Closevii. Click New

viii. Name: “Phone”ix. Logical name: new_mc1_phonex. Choose Two Options as the Type

6

xi. Save & Closexii. Click New

xiii. Name: “Fax”xiv. Logical name: new_mc1_faxxv. Choose Two Options as the Type

xvi. Save & Close

e. Add a Likert Scale Questioni. Click New

ii. The Name for the question: “Quality Rating”iii. Logical Name: new_qualityratingiv. Select the Option Set Typev. Choose Use an Existing Option Set

vi. Choose Likert Scale Qualityvii. Save & Close

10. We will also add a field that will record the current portal user.a. Click Newb. Display Name: Regarding Contactc. (Logical) Name: new_regardingcontactd. Type: Lookupe. Target Record Type: Contactf. Relationship Name: new_contact_customersupportsurveyg. Save & Close

7

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

8

15. Click Formatting and then select One column

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

9

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 forma. Select it by clicking on itb. Click Change Propertiesc. Choose to make the field Read Only and Uncheck “Visible by default”d. Click OK

20. Click Save21. Click Save As and save it as Survey Step 222. 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:a. Drag and Drop the Description field onto the formb. Click on it and click Propertiesc. Set the label to “Please give a description of the problem you contacted us for”d. Click OKe. Drag and Drop the Your Name field onto the formf. Click on it and click Propertiesg. Set the label to “What is your Name?”h. Drag and drop the Gold Star field onto the formi. Click on it and click Propertiesj. Set the label to “Are you a gold star member?”

10

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 form27. Drag and drop the Quality Rating field onto the form28. Click on it and click properties29. Set the label to “Please Rate the quality of service you received from us”30. Click OK31. Add the multiple choice question:

a. Click the Insert tab above the ribbonb. Click for a Two-Column section

c. Double-click on the newly created sectiond. Set the Label of this section to be: “How may we contact you?”e. Click Show the label of this section on the Form

f. Click OKg. Add each response to this question you created earlier to this section:

i. Drag and drop the ‘Email’ field onto the formii. Double-click on it or select it and click properties

iii. Click Formattingiv. Select Check Box as the Control Formattingv. Click OK

11

vi. Drag and drop the ‘Fax’ field onto the formvii. Double-click on it or select it and click properties

viii. Click Formattingix. Select Check Box as the Control Formattingx. Click OK

xi. Drag and drop the Phone field onto the formxii. Double-click on it or select it and click properties

xiii. Click Formattingxiv. Select Check Box as the Control Formattingxv. Click OK

12

xvi. Arrange the form nicelyxvii. Save & Close

32. Click on the Form Order and choose Main Form Set33. 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 Form36. Add Notes to the Form:

a. Click Insert > One Colum Tabb. Set the name of the new tab to Notes (double click to access its properties)c. Select the Notes Tabd. Click Insert > Notes

13

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):a. Drag and Drop the Description field onto the formb. Click on it and click Propertiesc. Set the label to “Please give a description of the problem you contacted us for”d. Click OKe. Drag and Drop the Your Name field onto the formf. Click on it and click Propertiesg. Set the label to “You Name?”h. Drag and drop the Gold Star field onto the formi. Click on it and click Propertiesj. Set the label to “Are you a gold star member?”

38. Drag and drop the Quality Rating field onto the form39. Click on it and click properties40. Set the label to “Please Rate the quality of service you received from us”41. Add the multiple choice question:

a. Click the Insert tab above the ribbonb. Click for a Two-Column sectionc. Double-click on the newly created sectiond. Set the Label of this section to be: “How may we contact you?”e. Click Show the label of this section on the Formf. Click OKg. Add each response to this question you created earlier to this section:

i. Drag and drop the ‘Email’ field onto the formii. Double-click on it or select it and click properties

iii. Click Formattingiv. Select Check Box as the Control Formattingv. Click OK

vi. Drag and drop the ‘Fax’ field onto the formvii. Double-click on it or select it and click properties

viii. Click Formattingix. Select Check Box as the Control Formattingx. Click OK

14

xi. Drag and drop the Phone field onto the formxii. Double-click on it or select it and click properties

xiii. Click Formattingxiv. Select Check Box as the Control Formattingxv. 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 & Close44. 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 Pages46. Click New47. Give the web page the following values:

a. Name: Example Support Surveyb. Partial Url : support-survey c. Publishing State: Publishedd. Website: Community Portale. Parent Page: Contentf. Page Template: Full Pageg. 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”

15

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:a. Name: Survey Step 1b. Type: Load Formc. Entity Logical Name: Example Support Survey (new_examplesupportsurvey)d. Mode: Inserte. Form Name: Survey Step 1f. Associate Current Portal User: True (check it)g. 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:a. Name: Survey Step 2b. Type: Load Formc. Web Form: Example Support Surveyd. Entity Logical Name: Example Support Survey (new_examplesupportsurvey)

16

e. Mode: Editf. Source Type: Result From Previous Stepg. Form Name: Survey Step 2h. Success Message: “Thank you for your submission”i. 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 Metadata61. Specify the Attribute Logical Name to be the logical name of the Likert scale question you

created: new_qualityrating62. Select Option Set as Horizontal Radio Button List from the style dropdown, Control Style

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

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

17

65. Navigate to the portal66. Sign in as administrator67. 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 Sales69. Navigate to Example Support Surveys70. Locate the survey submission you just created and open it71. 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?

18