Using Widgets

A widget is a mini-application that can provide either specific functionality (search, social bars, and so on) or areas into which you can add Ektron content (content blocks, list summaries, collections, and so on). You can drag and drop widgets onto a page using a wireframe, dropzones, and widgets. To open the widget bar from the PageBuilder menu, click the up/down () or down () controls. A widget consists of 3 file types.

NOTE: Your widget might use additional files, such as .css or .js files.You should place these files in a folder within siteroot/widgets, and give the folder the same name as the custom widget.

Overview

When you create a widget, save files to the siteroot/widgets folder. This folder path is defined in the site root/web.config file, so if you need to change the folder name or path, you must update the following web.configek_widgetPath element: 

<add key=”ek_widgetPath” value=”Widgets/" />.

Ektron stores each page’s data (a serialized XML string) as a type of content within the Ektron Workarea. The string is stored like other content types, such as HTML content and XML Smart Forms.

After widgets are integrated into Ektron, you can add them to a Dashboard in your profile page or a community group’s page. You also can drag-and-drop these building blocks onto a PageBuilder page. See Also: Personalizing a Web Page

The following figure shows the relationship between a wireframe, dropzones, and widgets.

  • A wireframe can have several dropzones.
  • Each dropzone can have several columns.
  • Each column can have several widgets.
Widget states

Widget States

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

Page mode

Widget mode

State

Illustration

View

View

Widget content appears on page.

Edit

View

Widget can be dragged/dropped, moved, deleted.

Edit

Edit

User defines widget information.

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>

For more information about widgets, see the following links: