Developer Student Guide

Page Templates

Table of Contents

Lesson: Liquid Templating

Exercise: Add Liquid to the Copy Page

Edit the copy of a Web Page

Add some basic Liquid content

Exercise: Create a new Snippet and render it using Liquid

Create a Snippet record

Edit the copy of a Web Page

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

Edit a Snippet through front-side editing

Add a greeting to the current user

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

Add a new Web Template Record in the CRM

Lesson: Page Template

In this lesson we will study the process of creating a new .aspx Page Template in our Web Project.

Exercise: Add a new Page Template

In this exercise we will add a new Page Template to your web project that can be used for future exercises in this chapter. The Page Template will be a fairly bare-bones template with minimal functionality, which we will add functionality to over the course of this chapter.

In VS 2012

  1. Open Visual Studio 2012.
  2. Select File Open Project
  1. Navigate to: C:\Program Files\ADXSTUDIO\XrmPortals\7.X.XXXX\Samples.
  2. Select AdxstudioPortals.sln then click the Open button
  3. In the Solution Explorer, expand the project: MasterPortal
  1. Navigate to the Pages folder
  1. Right-click on the pages Folder and select Add > New Item

  1. Choose Web Form using Master Page
  1. Name it “Example.aspx”
  2. Click Add
  3. Choose WebFormsContent.master as the master page
  4. A new page will appear with blank Content tags – you can remove all of them except the “MainContent” Content tag if you wish.
  5. Inside the “MainContent” Content tag; Copy and paste the following markup:

crm:CrmEntityDataSourceID="CurrentEntity"DataItem="<%$ CrmSiteMap: Current %>"runat="server"/>

adx:PropertyDataSourceID="CurrentEntity"PropertyName="adx_copy"EditType="html"runat="server"/>

  1. Just below the @Page declaration, add:

<%@ImportNamespace="Adxstudio.Xrm.Web.Mvc.Html"%>

  1. Change the class definition of the page (in the code behind) so that it inherits from PortalPage:

publicpartialclassExample : PortalPage

In CRM:

  1. Navigate to Portals Websites
  2. Open the Community Portal (or Training Portal) website entity in the CRM
  3. Navigate to related Page Templates using the right-most upper navigation dropdown (or use the sub-grid)
  1. Just above the grid, click the button to Add a New Page Template
  2. Complete the following Fields:
  3. Name: Example Template
  4. Website: Basic Portal
  5. Rewrite URL: ~/Pages/Example.aspx
  6. Click Save
  7. Navigate to related Web Pages
  1. Click the Add New Web Page button
  2. Complete the following fields:
  3. Name: Example Page
  4. Website: Basic Portal
  5. Parent Page:Contentor Workspace
  6. Partial Url: example
  7. Page Template: Example Template
  8. Publishing State: Published
  9. Copy: This is my example page
  10. Set the value of the Summary field to: This is the Summary

  1. On the Ribbon, click the Save button, then close the window
  2. Now rebuild the project in VS 2012
  3. Navigate to the Portal and navigate to the new example page you just created

Exercise: Add a Property Control

In this Exercise we will add a property control which will display an attribute from the current page.

Visual Studio

  1. Navigate to the Pages folder.
  1. Open Example.aspx you created earlier.
  2. Copy the following markup:

adx:PropertyID="Summary"DataSourceID="CurrentEntity"

PropertyName="adx_summary" EditType="text"

runat="server"/>

  1. And paste it beneath the <crm:CrmEntityDataSource> control already on the page
  2. Note that the only thing different between this control and the other <crm:Property> control on this page is that the data is being drawn from the summary attribute of the web page rather than the adx_copy.
  3. Save and rebuild.
  4. Navigate to your portal
  5. When the Example page loads, you should now see the title you added in Step 2 displayed just above the Example page copy.
  6. Note the Datasource that both property controls on the page are data-binding to:

crm:CrmEntityDataSourceID="CurrentEntity"DataItem="<%$ CrmSiteMap: Current %>"runat="server"/>

Exercise: Use the Attribute Helpers

  1. Got your Example.aspx Page Template handy? Great, because we are going to keep using that for everything from now on, just because. Add the following to the markup inside the MainContent content placeholder:

<%=Html.Attribute("adx_copy") %>

  1. Save all.
  2. Now rebuild the project in VS2012
  3. Navigate to the Portal and navigate to the new example page you just created.

Experiment

1)Experiment with the different ways to use the Attribute Helpers:

<%=Html.Attribute(Html.Website(), "adx_name") %>

<%=Html.TextAttribute("adx_title") %>

<%=Html.HtmlAttribute("adx_summary") %>

<%=Html.AttributeLiteral("adx_copy") %>

Exercise: Use the Site Setting Helpers

IN CRM

  1. Navigate to Portals > Websites > Basic Portal
  1. Navigate to Site Settings
  2. Create a new Site Setting:
  3. Name: Example Boolean Setting
  4. Value: true or false
  5. Save & Close

In Vs 2012

  1. Open Example.aspx
  2. Add the following to the markup:

<%if (Html.BooleanSetting("Example Boolean Setting") ?? false) %>

<% { %>

p The Boolean Setting is set to true!/p

% }else { %>

p The Boolean Setting is set to false! </p

<% } %>

  1. Save all
  2. Rebuild the project
  3. Browse to the portal and open up the example page

Experiment

1)Try creating a setting that takes an integer value and use the Html.IntegerSetting() helper to get and use this value.

Exercise 3: Use the Site Marker Helpers

  1. Navigate to Basic Portal in the CRM
  1. Create the News page as a child page of the home page if you have not already done so (this was done in an earlier exercise) Partial Url: news
  2. Click on the Site Markers navigation item.
  3. On the Ribbon, click the Add New Site Marker button. This site marker will specify the destination of the hyperlink that we will be placing on the page template (and the link will always point to that page)
  4. Complete the following fields:
  5. Name: My News
  6. Web Site: Community Portal (or Training Portal)
  7. Page: News
  8. On the Ribbon, click the Save and Close button.
  9. In VS 2012, Open Example.aspx
  10. Add the following to the markup of the page, In the “Main Content” content area:

<%=Html.SiteMarkerLink("My News") %>

  1. Save and rebuild the project then browse to see the results

Exercise: Use the Snippet Helpers

  1. In the CRM, open Portals > Websites > Basic Portal
  1. Navigate to Content Snippets
  2. Create a new Content Snippet:
  3. Name: Example Content Snippet
  4. Value: This is a Snippet.
  5. Save & Close

In VS 2012

  1. Open Example.aspx
  2. Add the following to the markup of the page, In the “Main Content” content area:

%=Html.TextSnippet("Example Content Snippet") %>

  1. Save all, rebuild, and browse to see the results.

Experiment

1)Experiment with different ways to use the Snippet Helpers according to the usages below. You can also create new Content snippets and try different values for those snippets.

<%=Html.HtmlSnippet("Example Content Snippet") %>

<%=Html.Snippet("Example Content Snippet") %>

<%=Html.SnippetLiteral("Example Content Snippet") %>

Exercise: Use the Web Link Helpers

In this exercise, we will utilize the MVC Web Links Helpers to render the links of a Web Link Set in the CRM.

  1. Under Basic Portal, Click on the related Web Link Sets navigation item (top right-hand dropdown)
  1. On the Ribbon, click the Add New Web Link Set button.
  2. In the Name field, enter: Blogs We Follow.
  3. On the Ribbon, click the Save button.
  4. Click the Web Links related navigation item.
  5. On the Ribbon, click the Add New Web Link button.
  6. Complete the following fields:
  7. Name: Mitch’s Blog
  8. Web Link Set: Blogs We Follow
  9. Website: Community Portal (or Training Portal)
  10. External Url:
  11. Publishing State: Published
  12. Display Order: 1
  13. Open in New Window: Yes
  14. Leave the remainder of the fields at their default values.
  15. On the Ribbon, click the Save and Close button.
  16. On the Ribbon, click the Add New Web Link button.
  17. Complete the following fields:
  18. Name: Basic Portal Homepage
  19. Web Link Set: Blogs We Follow
  20. Website: Community Portal (or Training Portal)
  21. Page: Home
  22. Publishing State: Published
  23. Display Order: 2
  24. Open in New Window: No
  25. Leave the remainder of the fields at their default values.
  26. On the Ribbon, click the Save and Close button.

In VS 2012

  1. Open Example.aspx
  2. Add the following Code to the MainContent content placeholder area:

<%foreach (var link inHtml.WebLinkSet("Blogs We Follow").WebLinks) %>

<% { %>

p<%=Html.WebLink(link) %</p

<% } %>

  1. Save and rebuild the project, then browse to see the result.

Experiment

1)Experiment with different ways to render Web Link Sets. Html.WebLinks is essentially equivalent to the <adx:Weblinks> web control. Html.WebLinksDropdown, on the other hand, gives more advancing rendering of bootstrap dropdowns for sub menus, etc. Play with the different options.

Exercise: Add a CrmMetadataDataSource control

Visual Studio

  1. Navigate to the Web project. In this exercise we will be binding a drop down list to our CrmMetadataDataSource
  1. Open Example.aspx
  2. Insert the following code within the “ContentBottom” <asp:Content> tag:

crm:CrmMetadataDataSource

ID="SatisfactionSource"

runat="server"

AttributeName="customersatisfactioncode"

EntityName="incident"

SortExpression="LabelDESC"/>

asp:Label

AssociatedControlID="Satisfaction"

runat="server"

Text="Satisfaction"/>

asp:DropDownList

ID="Satisfaction"

runat="server"

DataSourceID="SatisfactionSource"

DataTextField="OptionLabel"

DataValueField="OptionValue"/>

  1. Build the project. Navigate to the Portal
  2. When the home page is displayed, you should see a drop-down list containing customer satisfaction codes from the Case entity within CRM.

1