Is it possible to enhance a custom studio with basket functionality? Yes, even more, it's easy! We developed a control that actually displays the state of a basket: the BasketOverview control. In this article, we'll describe the use from this control and how you could extend it.

The BasketOverview control

So, let's discuss the most important properties from this control:

• Title: Obviously, this contains the title from this control. But important to know is that the content is always formatted with the number of basketitems as parameter. So, setting this property to 'This basket contains {0} items.' will result on the client in e.g. 'This basket contains 3 items.'
• BasketName: the name of the basket who needs to be monitored.
• EmptyMessage: A label, only rendered when the basket contains no items.
• FilledMessage: A label, only rendered when the basket contains at least one item.
• PostBackMode: In which case does a postback need to be launched?
  • Never: Adding or removing an item never causes a postback. This is the default mode. (Scenario 1)
  • ItemRemoved: Only removing an item results in a postback. (Scenario 2)
  • ItemAdded: Only adding an item results in a postback.
  • Always: Adding or removing an item always results in a PostBack.
• AdditionalLayoutTemplate: the template from additional items that are displayed when the basket contains at least one item.

Scenario 1

In scenario 1, we create a record searchpage which displays the records in a mosaicview (with basket icons). Clicking a basket icon should add a the specific record to the basket AND result in an update from the BasketOverview control, which describes the number of items from the basket.

Below you'll find already the complete markup for this scenario. Important to note is that the we set 'Basket ({0})' as Title from the BasketOverview control. The string contains '{0}' characters, which is a container where the number of basket-items will appear.

1
2
3
4
5
6
7
8
9
10
11
12
13

<awc:adampagemanager id="ctrAdamPageManager" runat="server" />
 <div class="BasketOverview">
  <awc:basketoverview modulecode="Global" id="ctrBasketOverview"
    title="Basket ({0})" emptymessage="The basket is empty" 
    filledmessage="The basket is filled" postbackmode="Never"
    basketname="MyBasket" runat="server" />
 </div>
    <awo:webrecordcollection id="ctrWebRecordCollection"
      runat="server" defaultsearchtext="*" />  
    <awc:webcollectionviewer id="ctrWebCollectionViewer"
      cssclass="WebCollectionViewer" runat="server" 
      collectionsource="ctrWebRecordCollection" 
      viewsdefinitionsetting="MyRecordViewDefinition" />

Another important property is 'BasketName'. Make sure the BasketName from the BasketOverview control contains the same value as the BasketName from the BasketIcon control. When using ADAM's default mosaicview, you should specify the basketName feature via the Views setting definition from the WebCollectionViewer.

1

<adam:basketname>MyBasket</adam:basketname>

When using a custom view, with a custom BasketIcon, you should set the BasketName property from the BasketIcon.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

public class MyRecordMosaicViewItem : RecordMosaicViewItem
{
  //Use this method when you would like to add your own custom basket icon
  protected override IList <control> GetAvailableActions()
  {
    IList<Control> oActions = base.GetAvailableActions();
    BasketIcon oBasketIcon = new BasketIcon();
    oBasketIcon.CssClass = "action icon";
    oBasketIcon.BasketName = "MyBasket";
    oBasketIcon.EnableTranslation = false;
    oBasketIcon.ToolTipAdd = this.TranslateSystemKey("lblAddToBasket");
    oBasketIcon.ToolTipRemove = this.TranslateSystemKey("lblRemoveFromBasket");
    oActions.Add(oBasketIcon);
    return oActions;
  }
}

Additional, we want to enhance the BasketOverview control by adding actions such as 'Download Basket', 'Clear Basket',... Therefore we make a class, inheriting from the ITemplate interface, called 'DownloadBasketTemplate'. And we simply assign this class to the AdditionalLayoutTemplate property from the BasketOverview control. (Code from this class can be found in the sample project)

1
2
3
4
5

protected override void OnInit(EventArgs e)
{
  base.OnInit(e);
  ctrBasketOverview.AdditionalLayoutTemplate = new DownloadBasketTemplate(this);
}

Conclusion: the adding and removing items to the basket is done via an AJAX callback which enhances the user experience. Another benefit from this control is that it hides automatically the AdditionalLayoutTemplate control when the basket does not contain any item.

Scenario 2

In this second scenario, we'll use the BasketOverview control on a basketoverview page (like the basket.aspx in assetstudio). Clicking the basket icon from a record should remove the selected record from the basket and from this page.

This means, we need to update the WebCollectionViewer whenever an item is removed from the basket. This could easily be done by setting the PostBackMode from the the BasketOverview control to ItemRemoved. Then the page is postbacked every time an item is removed from the basket, which will also update the WebCollectionViewer.

Below, you can see that we set the PostBackMode to ItemRemoved instead of Never for this scenario.

1
2
3
4

<awc:basketoverview modulecode="Global" id="ctrBasketOverview"
  title="Basket ({0})" emptymessage="The basket is empty"
  filledmessage="The basket is filled" postbackmode="ItemRemoved" 
  basketname="MyBasket" runat="server" />

So, using the BasketOverview control in this scenario can be done with a minimum of programming.