<%@ Control Language="C#" AutoEventWireup="true" 
  CodeFile="HelloWorld.ascx.cs" Inherits="widgets_HelloWorld" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0,
  Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
  Namespace="System.Web.UI" TagPrefix="asp" %>      
  <asp:MultiView ID="ViewSet" runat="server" ActiveViewIndex="0">
  <asp:View ID="View" runat="server">
  <!-- You Need To Do .............................. -->
    <asp:Label ID="HelloTextLabel" runat="server"></asp:Label><br />
    <asp:Label ID="CheckBoxLabel" runat="server"></asp:Label>
  <!-- End To Do .............................. -->
    </asp:View>
    <asp:View ID="Edit" runat="server">
    <div id="<%=ClientID%>_edit">
      <!-- You Need To Do .............................. -->
        <asp:TextBox ID="HelloTextBox" runat="server" Style="width: 95%">
          </asp:TextBox><br />
        <asp:CheckBox ID="MyCheckBox" runat="server" Checked="false" />
          <br /><br />
      <!-- End To Do .............................. -->
        <asp:Button ID="CancelButton" runat="server" Text="Cancel"
          OnClick="CancelButton_Click" /> &nbsp;&nbsp;
        <asp:Button ID="SaveButton" runat="server" Text="Save"
          OnClick="SaveButton_Click" />
    </div>
  </asp:View>
  </asp:MultiView>

Step 1: Copy, Paste, and Rename HelloWorld.ascx and HelloWorld.ascx.jpg

1. Open your website in Visual Studio.
2. In the Visual Studio Solution Explorer, open the widgets folder.
   

   

3. Within that folder, scroll down to and select HelloWorld.ascx.
   

   

4. Right click the mouse and choose Copy.
5. Scroll up to the widgets folder.
6. Right click the mouse and choose Paste.
   

   

7. Scroll down until you see Copy of HelloWorld.ascx.
8. Right click and choose Rename.
   

   

9. Rename the file new_widget.ascx. Visual Studio automatically renames the code-behind file to new_widget.ascx.cs.
10. Copy, paste, then rename the helloworld.ascx.jpg file to new_widget.ascx.jpg.The image file is 48 x 48 pixels and 72 dpi. Ektron administrators and content authors drag a widget’s image onto the page.

Step 2: Update the Class Names in the New Files

1. Double click on new_widget.ascx to open it.
2. On the first line of that file, replace the reference to HelloWorld (circled below) with new_widget.
   

   

3. Double click on the code-behind file, new_widget.ascx.cs.
4. Replace the class HelloWorld with new_widget.
   

   

5. Save new_widget.ascx and new_widget.ascx.cs.
6. Check for errors by choosing Build > Build Page for each file. Correct any errors before proceeding.

Step 3: Add Widget in Workarea

1. Open the Workarea.
2. Choose Settings > Configuration > Personalizations > Widgets.
3. Click Synchronize. The new user control file, new_widget.ascx, appears in the list.
4. Choose Settings > Configuration > Template Configuration.
5. Find the template that you created in Developing Wireframe Templates, PageLayout.aspx. Or, any wireframethe architecture of a Web page containing columns, dropzones, and layout information. template that you are using to create a PageBuilder page.
   

   

6. Click Update Template. On the Update Template screen, scroll down until you see the new widget.
   

   

7. Click Select All (circled in the figure).
8. Click Update Template. For directions on creating a PageBuilder page, see Developing Wireframe Templates.
9. Go to Content and select a folder that has a PageBuilder page.
   1. Choose Content > Folders > PageBuilder and click on PageLayout.
   2. Click Edit Page Layout.
10. Open the widget menu. Make sure your new widget appears on the menu.
    

    

After you create a new widget and enable it in the Workarea, you can begin to customize it. For more information about customizing widgets, see Customizing Widgets.

Understanding the User Control (.ascx) File

Here is the new_widget.ascx file that is the basis of the widget.

<%@ Control Language=”C#” AutoEventWireup=”true”
  CodeFile=”new_widget.ascx.cs” Inherits=”widgets_new_widget” %>
<%@ Register Assembly="System.Web.Extensions,
  Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
  Namespace="System.Web.UI" TagPrefix="asp" %>
    <asp:MultiView ID="ViewSet" runat="server" ActiveViewIndex="0">
        <asp:View ID="View" runat="server">
            <!-- You Need To Do ..............................  -->
<asp:Label ID="TextLabel" runat="server"></asp:Label><br />
<asp:Label ID="CheckBoxLabel" runat="server"></asp:Label>
            <!-- End To Do ..............................  -->
        </asp:View>
        <asp:View ID="Edit" runat="server">
            <div id="<%=ClientID%>_edit">
                 <!-- You Need To Do .............................  -->
<asp:TextBox ID="TextTextBox" runat="server" Style="width: 95%">
</asp:TextBox><br />
<asp:CheckBox ID="MyCheckBox" runat="server" Checked="false" />
<br />
                 <!-- End You Need To Do .........................  -->
<asp:Button ID="CancelButton" runat="server" Text="Cancel"
  OnClick="CancelButton_Click" />
<asp:Button ID="SaveButton" runat="server" Text="Save" 
  OnClick="SaveButton_Click" />
            </div>
        </asp:View>
</asp:MultiView>

Notice the following elements of the file.

• The asp:MultiView element declares that the control has 2 possible modes: View and Edit.

  <asp:MultiView ID="ViewSet" runat="server" ActiveViewIndex="0">

• in view mode, the marketing team can see the control but not change it.
• in edit mode, the developers can change the control’s content and properties.
• Between the multiview tags is information about the control in view mode. It has 2 fields: one is a text field, and the other is a check box.

  <asp:View ID="View" runat="server">
  <asp:Label ID="HelloTextLabel" runat="server"></asp:Label><br />
  <asp:Label ID="CheckBoxLabel" runat="server"></asp:Label>
  </asp:View>

• Also between the multiview tags is information about the control in edit mode. In edit mode, a text box, a check box, and a Save button appear. The text box and check box collect end-user input, and the Save button saves that input to the database.

  <asp:View ID="Edit" runat="server">
  <div id="<%=ClientID%>_edit">
  <!-- You Need To Do .............................. -->
  <asp:TextBox ID="HelloTextBox" runat="server" Style="width: 95%"> 
  </asp:TextBox><br />
  <asp:CheckBox ID="MyCheckBox" runat="server" Checked="false" /> <br />
  <!-- End You Need To Do .............................. -->
  <asp:Button ID="CancelButton" runat="server" Text="Cancel" 
    OnClick="CancelButton_Click" />
  <asp:Button ID="SaveButton" runat="server" Text="Save" 
    OnClick="SaveButton_Click" />

Understanding the Code-behind (.ascx.cs) File

Review the code-behind file,new_widget.ascx.cs.

• A series of using statements are at the top of the file. Notice the Ektron ones in particular:

  using Ektron.Cms.Widget;
  using Ektron.Cms;Marketing team
  using Ektron.Cms.API;
  using Ektron.Cms.Common;
  using Ektron.Cms.PageBuilder;
  using System.Text.RegularExpressions;

• Next, note a widget host class, which inherits the system.Web.UI.UserControl and IWidget classes.

  public partial class widgets_new_widget: System.Web.UI.UserControl, IWidget

The following figure summarizes the remaining elements of the code-behind file.

• In the next line, notice the widget’s properties: a string for the text field, and a boolean for the check box. You define the variables and their type here. Possible types are string, integer, long and date.

  #region properties
  private string _HelloString;
  private bool _CheckBoxBool;
  [WidgetDataMember(true)]
  public bool CheckBoxBool { get { return _CheckBoxBool; } 
    set { _CheckBoxBool = value; } }
  [WidgetDataMember("Hello Wolrd")]
  public string HelloString { get { return _HelloString; } 
    set { _HelloString = value; } }
  #endregion

• The following is a widget host declaration.

  private IWidgetHost _host;

• The following is the widget’s page_init events.

  protected void Page_Init(object sender, EventArgs e) 
    { _host = Ektron.Cms.Widget.WidgetHost.GetHost(this); 
      _host.Title = "Hello World Widget"; 
      _host.Edit += new EditDelegate(EditEvent); 
      _host.Maximize += new MaximizeDelegate(delegate() { Visible = true; }); 
      _host.Minimize += new MinimizeDelegate(delegate() { Visible = false; }); 
      _host.Create += new CreateDelegate(delegate() { EditEvent(""); }); 
      PreRender += new EventHandler(delegate(object PreRenderSender, EventArgs Evt)
        { SetOutput(); }); 
      ViewSet.SetActiveView(View); 
    }

Comments about the page_init code

Comments about the page_init code

• The gethost method returns a reference to the container widgethost for this widget. This is the case in both Personalization and PageBuilder.
• The Title property is the title of this widget. By setting it in page_init for the widget, we inform the host what text to put in the title bar above the widget. This works in both PageBuilder and Personalization.
• The events below host.Title are raised by the widgethost. It’s up to the widget to subscribe to them. In all cases, if we don’t subscribe to them, the icons don’t show up. This is a method of attaching widget code to button clicks and other events that occur outside the widget.
• For PreRender: Ektron renders the contents of this widget on pre-render, thus ensuring a single render event. Another option is to call SetOutput on the Load event, but you can only do that if the widget is not in edit mode currently.
• The final line sets the view to display mode.
• The following is the declaration of the widget’s edit events.

  void EditEvent(string settings) {
  string sitepath = new CommonApi().SitePath;
  ScriptManager.RegisterClientScriptInclude(this, this.GetType(), 
    "widgetjavascript", sitepath + "widgets/widgets.js");
  ScriptManager.RegisterOnSubmitStatement(this.Page, this.GetType(), 
    "gadgetescapehtml", "GadgetEscapeHTML('" + HelloTextBox.ClientID + "');");
  HelloTextBox.Text = HelloString;
  MyCheckBox.Checked = CheckBoxBool;
  ViewSet.SetActiveView(Edit);
  }

Comments about the edit code

Comments about the edit code

IMPORTANT: You must register JavaScript and cascading style sheet (css) instructions in an external file.

• The Edit event is triggered by the widgethost, and if you subscribed to it already, it will call the delegate here.
• Use sitepath to ensure that the correct path for included files is used across installations.
• Ensure that it works inside update panels by calling the scriptmanager to include the script. Alternatively, you can use Ektron.Cms.Api.Js.RegisterJSInclude ScriptManager.RegisterOnSubmitStatement(this.Page, this.GetType(), "gadgetescapehtml", "GadgetEscapeHTML('" + HelloTextBox.ClientID + "');");
• The onsubmitstatement is JavaScript that is run when the widget is submitted. It calls escape html, which cleans the submitted text to avoid any XSS.
• Notice the editing fields, so users can see the existing data.

  HelloTextBox.Text = HelloString;

  MyCheckBox.Checked = CheckBoxBool;

  ViewSet.SetActiveView(Edit);

• The following code is the widget’s save events.

  protected void SaveButton_Click(object sender, EventArgs e) 
    { HelloString = ReplaceEncodeBrackets(HelloTextBox.Text); 
      CheckBoxBool = MyCheckBox.Checked; 
      _host.SaveWidgetDataMembers(); 
      ViewSet.SetActiveView(View); 
    }

• The following code is the widget’s SetOutput events.

  protected void SetOutput() 
    { HelloTextLabel.Text = HelloString; 
  // client javascript remove brackets, server side adds back 
      CheckBoxLabel.Text = CheckBoxBool.ToString(); 
    }

• The following code is the widget’s Cancel events.

  protected void CancelButton_Click(object sender, EventArgs e) 
    { ViewSet.SetActiveView(View); }

• The following code is for greater than and less than signs.

  protected string ReplaceEncodeBrackets(string encodetext) 
    { encodetext = Regex.Replace(encodetext, "&lt;", "<"); 
      encodetext = Regex.Replace(encodetext, "&gt;", ">"); 
      return encodetext; }

Working with JavaScript and Cascading Style Sheets

You can use JavaScript or a cascading style sheet to add custom functionality or styling to a widget. To do this, place the JavaScript or cascading style sheet (css) instructions in an external file, then register it in the code-behind file.

Example of including a JavaScript file.

void EditEvent(string settings)
JS.RegisterJSInclude(this, _api.SitePath + 
  "widgets/contentblock/jquery.cluetip.js", "EktronJqueryCluetipJS");

Example of including a .css file.

Css.RegisterCss(this, _api.SitePath 
  + "widgets/contentblock/CBStyle.css","CBWidgetCSS");

WARNING! You must register JavaScript and .css files in an external file, as shown above. If you do not, the OnSubmit event places HTML in the TextArea field in encoded brackets (< >) and generates a dangerous script error.

The JS.RegisterJSInclude and Css.RegisterCss functions take 3 arguments.

• 1—A reference to the control that needs the script or style sheet on the page. Typically, ‘this’ or ‘me’. For example:
  • this
• 2—The URL of the script or style sheet being included. You should prefix the URL with a site path so it can be used with URLs like http://localhost/ektrontech and http://ektrontech. For example:
  • _api.SitePath + "widgets/contentblock/jquery.cluetip.js"
  • _api.SitePath + "widgets/contentblock/CBStyle.css"
• 3—A unique key. Only include the script specified by a key once. Your organization should develop a standard way to define JavaScript and .css keys. For example:
  • "EktronJqueryCluetipJS"
  • “CBWidgetCSS”

NOTE: Widgets use an update panel for partial postbacks. As a result, the ASP.NET tree view and file upload controls do not work with widgets. Ektron has workarounds for these functions. For an example of a tree view, see the content block widget (siteroot/widgets/contentblock.ascx). For an Ajax file uploader, see the flash widget (siteroot/widgets/flash.ascx).

Verifying that a Page is a PageBuilder Page

Whenever your code is interacting with a widget, you need to verify that it is on a PageBuilder page (as opposed to another Ektron page that hosts widgets, such as personalization).

To check for this, insert the following code:

Ektron.Cms.PageBuilder.PageBuilder p = (Page as PageBuilder);
If(p==null) // then this is not a wireframe
When you want to check the mode, use code like this.
If(p.status == Mode.Edit) // we are in edit mode

Applying Global and Local Properties to Widgets

Global and local widget properties reduce your development effort by eliminating settings data classes. While you can still use these classes and manage your own serialization, for the vast majority of types, the built-in engine performs the necessary work.

Global properties apply to every instance of a widget. Local properties apply to one instance. If both local and global values are assigned to a property, local overrides global.

As an example of using a local property to override a global, consider a ListSummary widget. You may want its sort mostly by modified date in descending order, but in certain instances you want to sort by title in ascending order.

• Global—Workarea > Settings > Configuration > Personalizations > Widgets

  [GlobalWidgetData()]
  public string NewWidgetTextData {
  get {return _NewWidgetTextData;} set {_NewWidgetTextData = value;
  }}

• Local—Drop the widget onto PageBuilder page, then click edit (Pencil icon).

  [WidgetDataMember()]
  public string NewWidgetTextData 
    { get { return _NewWidgetTextData; } set { _NewWidgetTextData = value; } }

Setting a widget's global properties

Setting a Widget’s Global Properties

A global property lets an Ektron developer or administrator assign properties and values that apply to all instances of a widget. You apply a global property to the widget’s code-behind page. Administrators could then set or update the property’s value in the Workarea’s Widgets screen.

For example, the Brightcove Video widget requires a player ID. You could insert that in the widget’s code-behind file. Then, an administrator could review and possibly update that information in the Workarea widgets screen. Whenever a user drops a Brightcove Video widget onto a page, the player ID is already assigned.

If the developer does not set a default value in code-behind, an administrator must set one on the Workarea’s Widgets screen.

If the developer does set a default value in code-behind, it will be applied unless changed by an administrator on the Workarea’s Widgets screen.

Steps for Setting a Global Property

1. Open the widget’s code-behind file, which is located in the siteroot/widgets folder.
2. In the properties section, insert the GlobalWidgetData attribute (shown below) to set the global property’s name and type.

   [GlobalWidgetData()]
   public string NewWidgetTextData 
     { get { return _NewWidgetTextData; } set { _NewWidgetTextData = value; } }

   Here is an example.

   

   The supported types for GlobalWidgetData are

   • Date Time
   • int
   • long
   • double
   • boolean
   • string
   • any enumeration
3. Save the code-behind file.
4. In the Workarea, go to Settings > Configuration > Widgets.
5. Click Edit for the widget whose code-behind file you edited in Step 1. A dialog box lets you view and edit global properties set in code-behind.
   

   

Setting a widget's local properties

Setting a Widget’s Local Properties

A local property lets an Ektron user assign property values that apply to a particular instance of a widget. For example, the Brightcove Video widget requires a Video ID, which identifies the video that appears where you drop the widget.

To set a local property:

1. Open the widget’s code-behind file, which is located in the site root/widgets folder.
2. In the properties section, insert the WidgetDataMember attribute to set the property. See example below.

   [WidgetDataMember(150530105432)]1
   public long VideoID 
     { get { return _VideoID; } set { _VideoID = value; } }

3. If you want to set a default value for the widget, use the attribute’s optional argument, which follows [WidgetDataMember. In the example above, the value is 150530105432.
4. Save the settings in your properties by populating them as you normally would.
5. In the Save event, call _host.SaveWidgetDataMembers();.
   

   

Adding a Field to a Widget

This section provides an example of adding a Content type drop-down to the List Summary widget. The drop-down lets the person dropping the widget on the page select from these choices.

• all types of content
• HTML content only
• assets only

Here is what the drop-down looks like once it is implemented.

To add this drop-down to the List Summary widget:

1. In Visual Studio, open the ListSummary widget, siteroot/widgets/ListSummary.ascx.
2. Find the text DisplaySelectedContent.
3. Below DisplaySelectedContent, add the following code to create a drop-down list for the ContentType property.
   

   <tr>
     <td>DisplaySelectedContent:</td>
     <td>
       <asp:CheckBox ID="DisplaySelectedContentCheckBox" runat="server" />
     </td>
   </tr>
   <tr>
     <td>ContentType:</td>
     <td>
       <asp:DropDownList ID="ContentTypeList" runat="server">
       <asp:ListItem Value="AllTypes">AllTypes</asp:ListItem>
       <asp:ListItem Value="Content">Content</asp:ListItem>    
       <asp:ListItem Value="Assets">Assets</asp:ListItem>
       </asp:DropDownList>
     </td>
   </tr>

4. Save the ListSummary.ascx file.
5. Open the code-behind file, ListSummary.ascx.cs.
6. In the properties region, declare a string variable for the ContentType property:

   private string _ContentType;

7. Create a local property with default setting of AllTypes:

   [WidgetDataMember("AllTypes")]
   public string ContentType { get { return _ContentType; } 
     set { _ContentType = value; } }

8. In the EditEvent area, set the select list's value to ContentType:

   ContentTypeList.SelectedValue = ContentType;

9. In the SaveButton_Click event, set ContentType as the select list's value:

   ContentType = ContentTypeList.SelectedValue;

10. In the SetListSummary() function, set the List Summary server control's ContentType to the CMSContentType property:

    ListSummary1.ContentType = 
      (CMSContentType)Enum.Parse(typeof(CMSContentType), ContentType);

11. Save the ListSummary.ascx.cs file.

Including Help for a Widget

You can include help for any widget that has the help icon ().

The help icon only appears when a user is editing a PageBuilder page. The icon appears both when a user is viewing a widget and editing its properties. It is not available to a page’s site visitors.

To create a widget’s help file:

1. Create an HTML file with information for users who will drop the widget on the PageBuilder page.

   You could create a content block within Ektron then switch to source view, copy the content into a word processor (like Notepad), and save it with an HTML extension.

2. Save the help file to the folder that contains the widget.
3. Add the WidgetHost’s HelpFile property to the code-behind of the page that hosts the widget. See example below.

   protected void Page_Init(object sender, EventArgs e)
   {
     _host = Ektron.Cms.Widget.WidgetHost.GetHost(this);
     _host.HelpFile = "~/widgets/myWidget/help.html";

• Your jewelry store is promoting gold necklaces. You create a hyperlink with a Campaign ID of gold. For example, http://www.mystore.com/product.aspx?cid=gold. In the Targeted Content widget, set the condition URL Parameter CID contains gold.

  If condition = true, the Targeted Content widget displays a ContentBlock widget that promotes gold necklaces.

• You are promoting a race to NASCAR fans. Your site has a membership group for NASCAR fans, and anyone visiting the site can join. In the Targeted Content widget, create a condition If user is in Group NASCAR.

  If condition = true, the Targeted Content widget displays a WebCalendar widget that lists upcoming NASCAR races.

• On Sunday Feb. 28, you are running a sale: all couches are 50% off. In the Targeted Content widget, set Date is 2013-02-28.

  If condition = true, the Targeted Content widget displays a TaxonomySummary widget that lists all couches and the discounted price.

• Display the "Engineering" Community Group's activity stream to its members. You have a Community Group for the Engineering Department. In the Targeted Content widget, set User is In GroupEngineering.

  If condition = true, the Targeted Content widget displays an Activity Stream widget, set up as follows:

  • ObjectID= ID of the Engineering group
  • FeedType = Community Group
• If the referring page is a Search Engine and its keywords include Pizza, you want to show a list summary of Pizza shops. Assume your content includes restaurant listings, and taxonomy categories are applied to this content. One category is pizza. In the Targeted Content widget, set Search Engine Keywords is Pizza.

  If condition = true, the Targeted Content widget displays a TaxonomySummary widget that lists all content assigned to the category Restaurants > Pizza.

• If a site visitor's Facebook profile "likes" Sony, display Sony products. In the Targeted Content widget, set the condition Facebook Info: Likes contains Sony.

  If condition = true, the Targeted Content widget displays a ContentBlock widget that promotes Sony products.

• See Also: 4 Trends that Shape the Future of Content Targeting

Creating a Targeted Content Widget

Prerequisite

The Targeted Content widget must be on the list of widgets assigned to the page's template. See Also: Adding the Wireframe and Widgets into Ektron

1. Drag and drop the Targeted Content widget onto a PageBuilder page.
2. By default, the first condition is added to the widget. Click Edit Condition.
   

   

3. Enter a condition name.
4. Click +or to set up the first condition.
5. Select an option from the drop-down list of condition criteria.
   —Image and criteria descriptions—

   

   • Search Engine—Use to specify widgets that appear
     • If a site visitor was referred to this page from any search engine (or not)
     • If the search engine from which the site visitor was referred is one of the following
       • Google
       • Bing
       • Yahoo
       • Other
       • None
     • If the search engine's keywords are (are not, contain, start with, or end with) a specified value
   • Referring URL—The referring host matches a string value (for example, www.example.com). Use this to determine the visitor 's originating site, such as a Facebook fan page.
   • URL parameter—The current page contains the specified URL parameter. For example, you create a campaign selling gold jewelry and base its content on the URL parameter cid=gold.

     If the URL of the page that hosts the Targeted Content widget contains cid=gold (for example, http://www.mystore.com/product.aspx?cid=gold), then display widgets assigned to that Targeted Content widget.

   • Cookie—A cookie matching the specified pattern is found on the site visitor's computer. Cookies are generally stored as name/value pairs, such as UserID—A9A3BECE0563982D. When checking for a cookie, you complete 3 fields.
     • cookie ID
     • logic (is, is not, contains, starts with, ends with)
     • a value
   • Device Configuration—The user's device matches a Device Configuration that you specify. For example, a content block displays only if a user accesses your website with a Smart Phone. To learn about Device Configurations, see Ektron's Mobile-Driven Web Experience and Ektron's Mobile-Driven Web Experience .
   • BreakpointConfig—The user's device matches a breakpoint that was defined in Ektron's Mobile-Driven Web Experience .
   • Logged in—The user is or is not logged in.
   • User is in group—Only applies to logged-in users. User is member of an Ektron User or Membership Group that you select from drop-down list.See Also: Membership Users and Groups, Managing Users and User Groups
   • User is in community—Only applies to logged-in users. User is a member of an Ektron Community Group that you select from drop-down list. See Also: Managing Community Groups
   • User Properties—Only applies to logged-in users. The value of the logged-in user's custom property satisfies the logic for the value you specify. See Also: Creating Custom User Properties

     Example:

     Zip code is a Custom User Property. You want to display a list of stores in New Hampshire for users whose Zip Code begins with 03.

     

     Condition / result

     Zip code = 03458 true

     Zip code = 02103 false

   • Date and Time: Day—The actual date (according to the Web server's clock) and a date you enter satisfy the specified logic.

     Logic operators:

     • is
     • is not
     • less than
     • greater than
     • equal to or less than
     • equal to or greater than

     Examples:

     Assume today's date is 2010-01-01

     Condition / result

     Date = 2010-01-01 true

     Date < 2010-01-01 false

     Date >= 2009-12-01 true

   • Date and Time: Day of Week—The current day (according to the Web server's clock) satisfies the specified logic.

     Logic operators:

     • is
     • is not

     Examples:

     Assume today's date is 2010-03-01 (Monday)

     Condition / result

     Day of week is Monday true

     Day of week is Tuesday false

     Day of week is not Tuesday true

   • Date and Time: Day of Month—The actual date (according to the Web server's clock) and a date you enter satisfy the specified logic.

     Logic operators:

     • is
     • is not
     • less than
     • greater than
     • equal to or less than
     • equal to or greater than

     Examples:

     Assume today's date is 2010-03-01 (Monday)

     Condition / result

     Day of month is 01 true

     Day of month is not 01 false

     Date >= 2009-12-01 true

   • Date and Time: Hour of Day—The actual hour (according to the Web server's clock) and number between 1 and 23 you enter satisfy the specified logic. The numbers are based on a 24 hour clock so, for example, 5 p.m. is 17.

     Logic operators:

     • is
     • is not
     • less than
     • greater than
     • equal to or less than
     • equal to or greater than

     Examples:

     Assume current time is 18:30:00

     Condition / result

     Hour of day is 18 true

     Hour of day is 23 false

     Hour of day >= 12 true

   • User Regional Info—Enter the user's country or state, or both. State selections are limited to states in the United States. This information is retrieved from the IP address of the person who is using your website. To retrieve this information, see Using GeoIP Information in the Targeted Content Widget.
   • Facebook Info—If the criterion matches information in the user's Facebook profile, display the widgets inserted into this condition. For example, if the criterion is Marital Status is Single and the user's Facebook Profile matches that value, display the assigned widgets. This criterion only works with users who log in via Getting Started with Ektron. You can apply any of these Facebook fields.
     • Age
     • Gender
     • Marital Status
     • Likes
     • Employment

     Use Contains with Free Text Fields

     On fields that use free text (such as Likes), you should use the contains operator, as opposed to is or is not. Contains is more flexible and finds a partial match. For example, if the user likes U.S. Soccer and you enter the term soccer and the contains operator, a partial match is made, so the user sees the related widget. On the other hand, if the user likes U.S. Soccer and you enter the term soccer and the is operator, an exact match is not made, so the user does not see the related widget.

     The Likes Field

     The Likes field lets you search through users' Facebook profile Likes and Interests. Or, you can narrow it down to a specific like/interest. For example, you could display a widget promoting Red Sox merchandise if, in their Facebook profile, users like a Sports Team that contains Red Sox.

   • Submitted For Data—Uses field and value for a form (by ID).
   • Otherwise—No condition evaluates to true.

     NOTE: You would typically use this criterion last, since it always evaluates to true. Any conditions below this are ignored.

6. Add additional criteria as desired. See Also: Using Widgets
7. Click Save.
8. Drag to the area below the new condition one or more widgets that appear if the condition evaluates to true.
   

   

9. If the widget requires you to fill out properties, click Edit and complete the screen.
   

   

Using Multiple Criteria in a Condition

Any condition can have several criteria joined by and an AND operator.

In this example, all conditions must be true for the widgets assigned to this Target Content widget to appear.

• the user is logged in
• today's date must be later than September 29, 2011
• the user is a member of the Ektron user group Administrators

If any of these condition is not true, the next condition assigned to the widget is evaluated, if one exists.

If all conditions are true, the widgets assigned to this Targeted Content widget appear. Additional conditions assigned to this widget are ignored.

You can also specify an OR relationship among criteria in one condition. To do so, click +or below any condition (circled below), then enter the OR condition.

For example, assume you want the time zone criteria to include Eastern Time and Pacific Time (but not in between).

Each set of criteria is evaluated independently. If any criteria set is true (that is, all of its statements are true), the widgets assigned to this Targeted Content widget appear. Additional conditions assigned to this widget are not evaluated. If none of the criteria sets is true, the next condition assigned to the widget is evaluated, if one exists.

Editing a Condition

There are 2 aspects to editing a condition within a Targeted Content widget.

Editing a condition's criteria

Editing a Condition's Criteria

NOTE: This assumes you are on the PageBuilder page that contains the widget and in Edit mode.

1. Click the condition you want to edit.
2. The area below it expands. Any widgets assigned to the condition appear.
   

   

3. Click Edit Condition.
4. Edit the condition then click Save.

See also Using Multiple Criteria in a Condition and Creating Conditions with the Targeted Content Widget

Editing widgets assigned to the condition

Editing Widgets Assigned to the Condition

NOTE: This assumes you are on the PageBuilder page that contains the widget and in Edit mode.

1. Click the condition that has the widget you want to edit.
2. The area below it expands. Any widgets assigned to the condition appear.
   

   

3. If you want to delete the widget, click X in its upper right corner (circled above).
4. To edit the widget's properties, click the pencil icon in the upper right corner (circled above). Click Save.

Customizing the Targeted Content Widget

To create a custom version of the Targeted Content widget (for example, to add rule templates):

1. Open the siteroot/widgets/Edit TargetedContent.ascx.cs file.
2. Create a class, for example, MyRuleTemplate, that inherits Ektron.RuleEditor.RuleTemplate in #region Rule Templates.
3. Modify private void AddAllRuleTemplates.
4. Add an instance of your class to the rest of the rule templates. For example, AddRuleTemplate(new MyRuleTemplate());

Referring to a Targeted Content Configuration

To refer to a Targeted Content Configuration:

Prerequisite

The PageBuilder page must include the Targeted Content widget. See Also: Adding the Wireframe and Widgets into Ektron.

1. Edit a PageBuilder page.
   

   

2. Drag and drop a Targeted Content widget.
3. Click Select Global Configuration (circled below).
4. Select the Targeted Content Configuration you want to place on the page.
   

   

5. Save, check in, or publish the page.

   NOTE: You can apply a global configuration to an existing widget. If you do, the global configuration replaces all conditions and results you previously applied.

Creating a Targeted Content Configuration

If you have created a Targeted Content widget, the process of creating a Targeted Content Configuration is almost identical.

Prerequisite

To access this screen, you must be a member of the Administrators group.

To create a Targeted Content Configuration:

1. In the Workarea, choose Settings >Configuration > Personalizations > Target Content.
2. Click Add. The Add Target Content Configuration screen appears.
3. Enter a Title.
4. Complete the steps to create a Targeted Content Configuration. For details on how to do this, see .
5. Click Save.

Editing a Targeted Content Configuration

If you edit a Targeted Content Configuration that is placed on one or more PageBuilder pages, they will reflect the edit after you publish the page.

Prerequisite

To access this screen, you must be a member of the Administrators group.

1. In the Ektron Workarea, choose Settings > Configuration > Personalizations > Targeted Content.
2. Click Edit () to the left of the configuration you want to edit. The widget appears.
3. Edit as necessary. See Also:
4. Click Save.

Deleting a Targeted Content Configuration

IMPORTANT: If you delete a Targeted Content Configuration that was placed on one or more PageBuilder pages, they display a blank area where the widget was dropped.

Prerequisite

To access this screen, you must be a member of the Administrators group.

1. In the Ektron Workarea, choose Settings > Configuration > Personalizations > Targeted Content.
2. Click Delete ().
3. Check the box to the left of the configuration you want to delete.
4. Click Delete.

Adding a Brightcove Video Widget

Follow these steps to play videos with the Brightcove Video widget.

1. Set the Brightcove Video widget Configuration in the Workarea if you did not use the first timer screen shown in the previous section.
   —Show how—

   1. From the Workarea, choose Settings > Configuration > Personalizations > Widgets.
   2. Click Edit () next to BrightcoveVideo.ascx to set the properties shown below.
      

      NOTE: Brightcove provides the values for the Global Settings for this widget on your Brightcove Account pages. Log in to Brightcove and go to Account Settings > API Management.

   3. Click Save.
2. Place the Brightcove widget on a PageBuilder page.
   —Show how—

   1. Edit a PageBuilder page.
   2. Drag and drop the Brightcove widget into a dropzonean area on a Web page where you can drag and drop a widget..
      See Editing Content on a PageBuilder Page for more information about PageBuilder and widgets.
3. Upload Videos Using the Brightcove Video widget.
   —Show how—

   NOTE: You can upload your video using your Brightcove.com account or follow these steps and upload a video using the Ektron Brightcove Video widget.

   1. Click Edit () on the Brightcove Video widget.
   2. Notice there are 3 tabs across the top—Video List, Search, and Upload.
   3. Click Upload.
   4. Enter Video Name.
   5. Enter Video Description.
   6. Click Browse and choose the video file to upload.
   7. Click Upload.
      

      A message on the Edit window shows that the Video is being uploaded. In this example, we are uploading the Training Program 8.0 video.

      

      NOTE: Your video may not be available to view immediately after uploading. Allow time for Brightcove to publish it or check its status on your Brightcove Account page.

4. Choose the Video to Play in the Brightcove Video widget.
   —Show how—

   1. Click Edit () on the Brightcove Video widget.
   2. Click either the picture or title of the video you want to show in this widget.

      

The following image is an example of the Brightcove Video widget on an Ektron OnTrek website page.

Troubleshooting the Brightcove Video Widget

If your videos do not show in the Brightcove Video widget, check the following topics.

• Did the video upload succeed?

  Check the status of your video by logging into your account on Brightcove and looking for it in the Media Library.
  

• Is the video encoded according to requirements from Brightcove?

  According to Brightcove's article Uploading Videos with the Media Module, "Your video files can use most available file formats; if your files are not already encoded as VP6 (FLV—Flash video) or H.264, Brightcove transcodes them into one of those formats."

• Do you see the video on the widget when editing the PageBuilder page but not when you publish the page?

  Check the publisherID setting in the widget Configuration.

Additional Information

• Brightcove Documents: http://support.brightcove.com/en/docs
• Brightcove: Setting Your HTML5 Video Delivery Options
• Brightcove: Delivering Video with HTML5 and Smart Players
• Brightcove: Test Your Browser for Brightcove HTML5 Video Player