Widget states on a Pagebuilder page

Widgets placed on a PageBuilder page have 3 possible combinations of states.

• Edit page mode+View widget mode. Widget can be placed on the page, moved, and deleted. For example:

  

• Edit page mode+Edit widget mode. User defines widget information. For example:

  

• View page mode+View widget mode. Widget content appears on page. For example:

  

In a widget’s user control file, you create an asp:MultiView element that determines available actions when a widget is in View mode and Edit mode.

 

<%@ 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.
   —Image—

   

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

   

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

   

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

   

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) with new_widget.
   —Image—

   

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

   

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 the widget to the wireframe template

NOTE: Use this procedure to select (or restrict) any widget that you want to be available to use on a wireframe template. When the template is used, the selected widgets appear in the PageBuilder Widgets menu.

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.
   —Image—

   

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

   

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.
    —Image—

    

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 a widget.

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.

—Image—

• 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 a widget

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 global properties for a widget

Setting global properties for a widget

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.

To set global properties:

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 (as shown) to set the global property’s name and type.

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

   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.
   —Image—

   

Setting local properties for a widget

Setting local properties for a widget

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 properties:

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.

   [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();.
   —Image—

   

Adding a field to a widget

You can add a Content type drop-down to the ListSummary 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

The drop-down appears as follows after it is implemented.

—Image—

To add this drop-down to the ListSummary 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.
   —Image—

   <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 ().

—Image—

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.

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

Setting up your account information for the first time

You see the following screen the first time you use a Brightcove Video widget if you have not entered account information in the Workarea. Enter your Brightcove account information here. After you successfully save your account data, this screen does not appear again.

—Image—

Adding the 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.
      

      NOTE: Brightcove provides the values for the Global Settings for this widget on your Brightcove Account pages. Log in to Brightcoveand 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.

—Image—

Additional Brightcove 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

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.

ActivityStream

Displays activities of a user or group, depending on the type of page on which it is placed. See also Using the ActivityStream widget.

• Object ID. Enter the user’s or community group’s ID.
• Feed Type. Select User or Community Group.
• Max Results. Enter the number of results you want to display at a time.

AuthorFacets

Place this widget on the page to display a list of authors' blog posts.

• Details-Page Mode. Ignore this checkbox.

Author Facets output

BlogPostCallToAction

Place this widget on the page and whatever CTA is selected for the blog (on the Metadata tab) will automatically appear on the page with the blog.

Blogs

After you select a blog ID, displays posts from that blog.

Properties Tab: 

• Blog ID. ID number of the blogs.
• Blog Name. Name of the blog.
• Show Summary. Check to display.
• Show Author. Check to display.
• Show Date Creation. Check to display.
• Show Comment. Check to display.
• Max Results. Enter the number of blogs to display.

BlogsFeed

• Page Size. Enter how many lines to show in the feed.
• Feed URL. Enter the URLUniversal Resource Locator of the blogs. The default is the current blog page.
• Link Text. Enter the text label to click on to obtain the blogs feed.
• Feed Type. Choose the type of feed─Rss or Atom─from the drop down.

BrightcoveVideo

Plays a Brightcove video. You must have a Brightcove account to add a video with the widget.

See Using the Brightcove Video widget for information about using the BrightCove widget.

CallToAction

Double click on the CTACall to action; a user interface element that prompts a site visitor to touch or click it to proceed on a path toward conversion from site visitor to customer. For example, links that say "For more information...," "Add to cart," or "Buy now." that you want on the page. If you have a lot of CTAs in the list, enter the name of the CTA you want in the Search box and click Search ().

Collection

Displays a collection. You select a Collection ID. See Working with collections.

• Collection Id. Choose the ID of the collection you want to display.
• Page Size. Enter the number of items you want to display.
• Teaser. Check if you want to display a 1-line excerpt from the content item.
• Enable Paging. Check if you want to page through the specified number of titles. Leave unchecked for an infinite scrolling of blog titles.
• Include Icons. Check if you want icons to display next to their associated blog posts.
• Add Text. Enter text that the widget will display when adding a new item to the widget (rather than going directly in the Workarea and modifying the collection itself.)
• SelTaxonomyID. Choose the taxonomy ID that you want to associate with this collection. Zero (0) means no association.
• Display Selected Content. Check if you want to show the blog content in the collection on the page.

ContentBlock

Go to a folder and choose a content item (by ID) to display that content in the widget. Alternatively, you can create new HTML content from the widget by clicking New.

ContentList

Displays a list of content blocks. In contrast to a List Summary, where content must be in a specified folder, the ContentList control displays content from any Ektron folder.

• Content IDs. Enter a comma-separated list of ID numbers for the content you want to display.
• Teaser. Check if you want the summary information to display with each blog post title.
• Include Icons. Check if you want icons to display next to their associated blog posts.
• Direction. Choose Ascending or Descending order.
• Order By. Choose to order the data by title, order of the content IDs, date modified, date created, and first or last name of the last person to edit the page.

ContentReview

Lets site visitors rate and review the current page.

• Star Style. Choose 1 of the following:
  • Ajax 5 Stars
  • Ajax 5 Stars Comment
  • Ajax 5 Stars with Increments
• Hide Review List. Check to hide the list.
• Review Page Size. Enter the size (in lines) of the page.

DateFacets

Place the DateFacets (Date Range) widget on the page to display a list of blog posts and resources that were posted during various time periods.

• Details-Page Mode. Ignore this check box.

Date Facets output

FeaturedItems

• Collection Id. Choose the ID of the collection you want to display.
• Page Size. Enter the number of items you want to display.
• Teaser. Check if you want to display a 1-line excerpt from the content item.
• Add Text. Enter text that the widget will display when adding a new item to the widget (rather than going directly in the Workarea and modifying the collection itself.)
• Header Text. Enter the text you want as your featured items headline.

Flash

Displays a selected Flash file which resides in Ektron. You can also set the display’s height and width. See Using the Flash widget.

Flickr

Display Flickr’s Most Recent or Most Interesting photos. The user also can select the number of rows and columns for the image display.

FormControl

Go to a folder and choose a form (by ID) to display in the widget.

GoogleGadget

Select from several Google feeds to display in the widget.

Heading

Click on the heading size you want, then type the heading text in the text entry box. Click Save.

HelloWorld

Created by Ektron to help developers understand how to create their own widgets.

iFrame

Lets you enter a path to a Web page or an item on the Web page.

• URL. Enter the URLUniversal Resource Locator of the website you want to display in the iFrame.
• Widget Title. Enter text to introduce the content.
• Horizontal Scroll Bar. Check to enable horizontal scrolling of the content.
• Vertical Scroll Bar. Check to enable vertical scrolling of the content.

ListSummary

Displays an Ektron List Summary, a list of certain types of content in a selected folder. You can click on the Folder tab and go to the content or click on the Property tab and specify the following fields.

• Folder Id. Enter the number of the folder you want to display in the list.
• MaxResults. Enter the number of items you want to display in the list.
• Teaser. Check if you want the summary information to display with each blog post title.
• Recursive. Check if you want subfolders to be included in the list.
• Enable Paging. Check if you want to page through the specified number of titles. Leave unchecked for an infinite scrolling of blog titles.
• Include Icons. Check if you want icons to display next to their associated blog posts.
• OrderByDirection. Choose Ascending or Descending order.
• OrderKey. Choose to order the data by title, date modified, date created, and first or last name of the last person to edit the page.
• ContentType. Choose the type of content that you want, filtering the results to 1 of the following: AllTypes, Content, Forms, Archive_Content, Archive_Forms, Assets, Archive_Assets, LibraryItem, Multimedia, Archive_Media, NonLibraryContent, DiscussionTopic, CatalogEntry.
• Add Text. Enter text that you want to introduce the collection.
• SelTaxonomyID. Choose the taxonomy ID that you want to associate with this collection. Zero (0) means no association.
• Display Selected Content. Check if you want to show the blog content in the collection on the page.

MessageBoard

Lets a site visitor leave comments on the page.

MetaDataList

Displays content whose metadata fits a selected folder location and keywords.

MostPopular

Reports on the following categories of content on your website: Most Viewed, Most Emailed, Most Commented, or Highest Rated. See also the Most popular widget.

• Tab text. The text that appears on this tab. In the above example, the left tab's text is the default Most Viewed.
• Visible. Determines if the tab you are editing appears on the widget. At least one tab must appear. Checked is the default.
• Number of days to report. The number of days for which to display the data. The default is 7.
  • The current day is not counted, since it is incomplete. So if you enter 1, you see information for all of yesterday and today.
  • The date calculation is based on the clock on the website's server.

    NOTE: You can change this to any number you wish. However, the widget can only show data for days for which data is stored in your database.

• Tab 1 Event. Determines the information appears when a tab is clicked.
  • Click Event
  • Most Emailed
  • Most Commented
  • Highest Rated
  • Most Viewed
• Filter By. You can restrict the content appears on this widget by selecting a folder (default) or a taxonomy.

MultivariateExperiment

This controls the experiment. Settings include the target content number, start/stop button and the Report hide/show button. See also Measuring Web experiences with multivariate testing.

• Target. Enter the content ID of the target page. To help find the content, browse the content folders by clicking Browse (...).
• Start/Stop. Click this button to start or stop the experiment.
• Conversions. the number of conversions any variations must have before the experiment is automatically stopped. For example, 1000 tells the experiment to automatically end when one variation has reached 1000 conversions.

MultivariateSection

Drag any type of content widget into the Multivariate Section widget. These produce the variations used during the experiment. See also Measuring Web experiences with multivariate testing.

• Variant 1. Place a content widget into Variant 1 and specify its content.
• Variant n. Click on the Plus icon to add another variant.

MultivariateTarget

When a page view occurs on a page containing this widget, the conversion count is increased. See also Measuring Web experiences with multivariate testing.

QRCode

Generates a QR code based on the information you provide.

RecentPosts

• Page Size. Enter the maximum number of items to show.

Recent Posts Output

ResponsiveImage

Adds a responsive image to a page. Click Select Image to browse for an image in the Library.

• Title. Enter the text that you want to appear when you hover over the image.
• Border. Enter the number of pixels you want the image border to have.
• Link. Enter a URLUniversal Resource Locator that you want to load when the image is clicked on.

RSSFeed

Lets you enter the path of an Really Simple Syndication (RSS) feed.

Spacer

Lets you create an unused space on the Web page.

• Horizontal Break. Check to display a line in the space.
• Height. Choose the height of the space in em, pixel (px), or point (pt) values.

StaticContentBlock

Type static content into the text entry box and click Save. The text is displayed on the page.

TagCloud

• Minimum Font Size. Enter the point size of the smallest font to be displayed in the tag cloud.
• Maximum Font Size. Enter the point size of the largest font to be displayed in the tag cloud.

TargetedContent

Lets you create a set of conditions. As soon as any condition evaluates to true, an appropriate widget appears. See Connecting visitors with targeted content for information about the TargetedContent widget.

• Name. Give a name to the set of criteria for your targeted content.
• Condition. Click on the +Or button to specify 1 or more criteria. For example, a condition may stipulate that the URL parameter terms contains either "pizza" or "Italian."

TaxonomySummary

Displays content assigned to a taxonomy category.

See also Organizing content with taxonomies .

TextSearch

Place on a PageBuilder page to add a search box to the page.

Trends

By default, the Trends widget shows the Most Viewed content on your website. You can edit the widget so it displays any of these content categories instead: Most Emailed, Most Commented, or Highest Rated.

• Report Type. Report types are:
  • Most Viewed (default)
  • Most Emailed
  • Most Commented
  • Highest Rated
• Number of days to report. The number of days for which to display the data. The default is 7.
  • The current day is not counted, since it is incomplete. So if you enter 1, you see information for all of yesterday and today.
  • The date calculation is based on the clock on the website's server.

    NOTE: You can change to any number you wish. However, the widget only shows data for days for which data is stored in your database.

• Order Direction. The direction in which search results are sorted. The default is Descending.
  • Ascending. Alphabetical results from A to Z; numeric values low to high; dates from oldest to most recent
  • Descending. Alphabetical results from Z to A; numeric values high to low; dates from most recent to oldest
• Maximum Number of Items. Enter the maximum number of content items that may appear on the Trends widget. The default is 5. The Ektron database maintains a count (number of hits) for each content item, for each date. When you select a number of days, the Trends widget displays the content with the most hits during that date range, up to the number you set in this field.
• Filter By. You can filter which content appears on this widget by selecting a folder or a taxonomy.

WebCalendar

Provides full calendar functionality, including adding events.

See also Working with calendars.

YouTubeVideo

Lets you embed code for any YouTube video.

• Video List. Click on this tab to display videos based on the Sort By drop-down.
• Sort By. Choose 1 of the following sort criteria: recently featured, top rated, top favorites, most viewed, most popular, most recent.
• Search. Click on this tab to display videos based on what is found by the Search By field.
• Search By. Enter text to search for videos.