ElasticWCM_Simple project provides an example of basic content management and page publishing.
It is a standard ASP.NET Web Application project generated by Visual Studio, where the ElasticWCM content management functionality has been added.
Download Demo Projects here.
Lesson 1. Open project in Visual Studio 2010, configure Environment Keys
Extract files from the downloaded Demo package and navigate to the ElasticWCM_Simple folder. Open the ElasticWCM_Simple.csproj project with Visual Studio.
web.config
Before running the project, make sure you have put your ElasticWCM Environment Key to the web.config file. You'll find the Environment Key on Environments & Keys page of your ElasticWCM Dashboard. If you don't have an ElasticWCM account yet - subscribe for free here.
Here is an example of how Environment Key might look (below is not a real key - copy yours from the Dashboard)
<appSettings>
<add key="ElasticWCM_Cloud_Key" value="Production_378210-121737-A07nUXPFjoTKnjzVR7smIgZz8QZcCUTu357=="/>
</appSettings>
There is another thing to note in the web.config file. As you would do for any web application consuming a web service, you should increase the number of allowed internet connections:
<system.net>
<connectionManagement>
<add address="*" maxconnection="40" />
</connectionManagement>
</system.net>
Content controls
To be able to play with ElasticWCM Content Controls you need to add them to the Visual Studio Toolbox - right-click in the Toolbox, select "Choose Items…", click "Browse…", navigate to ElasticWCM.Client.dll and click "Open". The ElasticWCM.Client.dll resides in the "Dll" folder in the Demo Projects package.
Lesson 2. Page Toolbar
In Visual Studio open Site.Master page. Note the declaration of the ElasticWCM controls at the top of the page:
<%@ Register Assembly="ElasticWCM.Client" Namespace="ElasticWCM.Client.Controls" TagPrefix="ewcm" %>
The PageToolbar control is placed in the footer div at the bottom of the page:
<ewcm:PageToolbar ID="PageToolbar1" runat="server">
</ewcm:PageToolbar>
This control displays content management buttons to authorized users. Behind the scenes it also conducts all communications with the cloud-based ElasticWCM Content Database.
Lesson 3. Content Controls on the Default.aspx page
In Visual Studio open Default.aspx page. There are several content controls here.
Let's start with the StringField content control having FieldName="Home Page Title". You might notice that there are two instances of such control on the page: one is inside <title> tag in the HeadContent placeholder, and another one is inside <h2> tag in the MainContent placeholder. This is because we want those tags to have exactly the same text while rendering the page. When a user starts editing the page content, the ElasticWCM Page Editor is smart enough to show editable version of the "Home Page Title" field just once, no matter how many instances of that field were placed on the page.
<ewcm:StringField runat="server" FieldName="Home Page Title">Welcome to ElasticWCM!</ewcm:StringField>
The most important (and required) parameter of the content control is the FieldName - it is used together with other optional parameters to uniquely identify the content field on the page.
The text between opening and closing tags of this control represents a default text for the content field. The control will display this text until it is changed through content management, after that the control will display text retrieved from the content database instead.
Another way to provide default text is to use DefaultText parameter of the control:
<ewcm:StringField runat="server" FieldName="Home Page Title" DefaultText="Welcome to ElasticWCM!" />
DefaultText should be a plain text, it will not display rich HTML or other controls - for such functionality look at the HtmlField control.
Another content control you can find on the Default.aspx page is the ImageField control:
<ewcm:ImageField runat="server" FieldName="Title Image" DefaultImageUrl="~/flowers.jpg"
DefaultAlternateText="my flowers" />
It is similar to the standard ASP.NET Image control, just instead of ImageUrl and AlternateText parameters it takes DefaultImageUrl and DefaultAlternateText.
One of the most widely used content controls in ElasticWCM is HtmlField control.
<ewcm:HtmlField runat="server" FieldName="Home Page Text">
<DefaultContent>
<p>To learn more about ElasticWCM visit <a href="http://www.elasticwcm.com"
title="ElasticWCM website">www.elasticwcm.com</a>.
</p>
</DefaultContent>
</ewcm:HtmlField>
As any ElasticWCM Content Control it has the FieldName parameter, but unlike StringField the HtmlField takes rich HTML as content and can contain other ASP.NET and ElasticWCM controls in the DefaultContent area. (Some ASP.NET controls cannot be used inside HtmlField - see documentation.)
Again, default content of a Content Control is displayed only when there is nothing in the ElasticWCM Content Database yet. Once a user modifies content on the page the default content becomes irrelevant - only content from the Content Database will be displayed on the page.
This is it! By simply dragging and dropping ElasticWCM Content Controls on the page you can make it into a modern Content Management System.
Lesson 4. VaryByParams
VaryByParams is another very important parameter of any ElasticWCM Content Control. To understand a purpose of it, open the Article.aspx page in Visual Studio.
First, look at the HtmlField having FieldName="Left Menu". As the default content it provides simple navigation menu for the page. The menu consists of two links:
<ul>
<li><a href="Article.aspx?topic=localweather">Local Weather</a></li>
<li><a href="Article.aspx?topic=worldweather">World Weather</a></li>
</ul>
Look at the URL of these links. It references the current page Article.aspx but with different QueryString parameters: ?topic=localweather and ?topic=worldweather. So, as you might guess, we expect to see different content for Local and World Weather while using the same page layout defined by the Article.aspx code. Essentially, using terminology from common content management systems, we want to use Article.aspx as a Page Template and vary the content displayed on the page by the "topic" QueryString parameter.
This is what the VaryByParams parameter does - it specifies the name (or comma delimited list of names) of QueryString parameter to consider while identifying the content field.
Look at the "Page Title" field.
<ewcm:StringField runat="server" FieldName="Page Title" VaryByParams="topic" />
It specifies VaryByParams="topic". This means that this field displays different content for URLs Article.aspx, Article.aspx?topic=localweather and Article.aspx?topic=worldweather. So, here we essentially have three different content pages referencing the same Page Template.
Note, that the field will ignore all other QueryString parameters: so URLs Article.aspx?topic=localweather and Article.aspx?topic=localweather&aa=bb will display the same content provided for the Article.aspx?topic=localweather URL.
As you can see, the VaryByParams parameter provides the ability to create unlimited number of content pages using a single page template (in this example Article.aspx). It also allows you to share some content between multiple pages by using different combinations of QueryString parameters for different content fields. (Learn more about this in the Catalog Augmentation section).
Lesson 5. Let's see how it works.
Start the project and take a look at the Default.aspx page displayed in the browser.
If at the bottom of the page you see warning that ElasticWCM is not configured - it means you have not provided your own ElasticWCM Environment Keys in the web.config file. See here how to do that.
If you see a link "Powered by ElasticWCM" at the bottom of the page - everything is OK and ready to go.
To start managing the content you need to login as an authorized content manager.
Click "Log In" link and enter user name Admin and password test123 - this is the credentials stored in the Membership database provided with the demo project (see App_Data folder). Make sure you have MS SQL Server Express up and running on your developer computer for the Membership database to work.
After successful login you'll see the Page Toolbar instead of the "Powered by ElasticWCM" link.
This is because the Admin user is a member of the ElasticWCMSuperAdmin role in the Membership database. By default in ElasticWCM this role has Super Admin permissions - can perform all content management operations. You can change the name of default roles, can create your own roles with your own combination of permissions, and much more - see documentation for permission management.
Click "Edit Page" button - you'll see a confirmation dialog informing you that content fields will be Checked Out. This means that those fields will be locked for you, other users will not be able to modify them until you Check them In. (There is one exception to this rule - a users with "ManageAllDrafts" permissions will be able to override your Check Out.)
After clicking OK you will be redirected to the ElasticWCM cloud-based Page Editor. (Note that while debugging in Visual Studio with Internet Explorer this can be slow because Visual Studio runs Java Script debugger and there is a lot of Java Script in the Page Editor - you can shut off Java Script debugger in Visual Studio, or use another web browser to make the process faster).
At the top of the Page Editor page you see your Company or Web Site name as you provided it during registration.
Page Url is a url of the web page you are currently editing.
Language is the current language selected on the web site. If you did not enable the localization this will be the default language - you can change it in the web.config file.
User is the user ID determined by the authentication system of your web site - in this example it is the login you provided when signing in.
The set of buttons at the header area and at the bottom of the page corresponds to the set of actions you are allowed to perform. In this example you are a Super Admin, so all actions are enabled.
Modify text in the "Home Page Text" field and click Publish button. Click OK in the confirmation dialog.
You will be redirected back to your web site and will see the new text on the page.
Lesson 6. ElasticWCM Service Dashboard
Navigate to https://www.elasticwcm.net/ to see your ElasticWCM Service Dashboard. You might need to login into your ElasticWCM account.
Here you can manage your account profile, see your subscription usage, see and remove unnecessary content.
Click on "Environments & Keys" button. If you have any content in the Content Database (you've edited any pages) then you'll see the "Manage Content" button. Click it. If you don't have MS Silverlight 5 installed you'll be prompted to download and install it - do that.
What you'll see is the ElasticWCM Content Analyzer allowing you to see all content fields in your content database, search and filter them, view all previous versions of the content stored in the database, and delete the fields that you don't need (to save database space).
Edit content in the web site to see how it is reflected in the ElasticWCM Content Analyzer.
Go to the next example
When you are comfortable with basic ElasticWCM content management features load the more advanced example - ElasticWCM_Expanded project.