Print

Sometimes you'll want a User to be able to show/hide controls in the application. To provide better usability, you will also want to store the User's preference, so that the User will not need to hide the same control again and again every time the application is started. Pick any built-in Sitecore application and make sure that if you hide the toolbar, it will also be hidden the next time you start the same application. 

The article shows the right way to maintain this behavior in your applications. We will use a sample application and provide a way to show/hide the toolbar and remember this setting. The article uses sample code to explain the process, please read the comments carefully.

 

1.  Application Layout Code

 1<?xml version="1.0" encoding="utf-8" ?> 
 2<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
 3  <supportplayground>
 4    <FormPage>
 5      <CodeBeside Type="Sitecore.Support.Codebeside,support.playground.dll"/>
 6      <GridPanel ID="GridPanel" class="scBackground" Height="100%" Width="100%">
 7        <!-- Notice GridPanel.Row.ID="ToolbarRow" - it assigns an ID to the row of the GridPanel, that
 8             contains the Toolbar itself. This way we can hide this row later on -->
 9        <Toolbar ID="Toolbar" GridPanel.Row.ID="ToolbarRow">
10          <Toolbutton Header="Tool button" Icon="applications/32x32/view.png" />
11          <Toolbutton Header="Tool button" Icon="applications/32x32/exit.png" />
12        </Toolbar>
13         
14        <!-- Sample Listview inside the scroll box to show how other controls behave when
15             the toolbar is hidden -->
16        <Scrollbox ID="Scrollbox" GridPanel.Height="100%">
17          <Listview ID="Listview" View="Icons" Background="White">
18            <ListviewHeader>
19                <ListviewHeaderItem Name="name" Header="Name" />
20            </ListviewHeader>
21          </Listview>
22        </Scrollbox>
23
24        <!-- Button to trigger the method that controls visibility of the toolbar -->
25        <Button Header="Toggle toolbar" Click="ToggleListview" />
26        
27        <!-- A handy control for retaining data between postbacks, instead of the viewstate 
28             In this example it shows whether the toolbar row is hidden or not -->
29        <Action ID="VisibleAction" />
30      </GridPanel>
31    </FormPage>
32  </supportplayground>
33</control>

2.  Application Layout

The application basically consists of the toolbar itself, a sample listview and a 'Toggle toolbar' button. When the application is initially loaded, it checks whether it should show or hide the toolbar based on whether the current User choose to hide it previously. Later, when the User clicks the 'Toggle toolbar' button, information about the current setting is saved and the control is shown or hidden, depending on its previous state.

3.  Code-beside Code

 1using#region using
 2
 3using System;
 4using Sitecore;
 5using Sitecore.Data;
 6using Sitecore.Data.Items;
 7using Sitecore.Web.UI.HtmlControls;
 8using Sitecore.Web.UI.WebControls;
 9using Sitecore.Web.UI.Sheer;
10using Sitecore.Web.UI.Framework;
11
12#endregion using
13
14namespace Sitecore.Support
15...{
16   public class Codebeside : BaseForm
17   ...{
18      protected GridPanel GridPanel;
19      protected Toolbar Toolbar;
20      protected Action VisibleAction;
21
22      protected Listview Listview;
23
24      protected override void OnLoad(EventArgs e)
25      ...{
26         base.OnLoad (e);
27
28         if (!Context.ClientPage.IsEvent)
29         ...{
30            // Check whether the user has chosen to show the toolbar while using
31            // the application before. Default value is true, so that the toolbar will
32            // be visible when application starts for the first time.
33            // Hide or show the toolbar row accordingly
34            if (Registry.GetBool("/Current_User/Visibility sample/VisibilityStatus", true))
35            ...{
36               VisibleAction.Checked = true;
37            }
38            else
39            ...{
40               GridPanel.SetExtensibleProperty(Toolbar, "Row.Style", "display:none");
41               VisibleAction.Checked = false;
42            }
43
44            // populate listview with sample items
45            string[] headers = new string[] ...{"item A", "item B", "item C", "item D"};
46            foreach(string header in headers)
47            ...{
48               ListviewItem listItem = new ListviewItem();
49               listItem.ID = Control.GetUniqueID("I");
50               Context.ClientPage.AddControl(Listview, listItem);
51               listItem.Header = header;
52            }
53         }
54      }
55
56      // Show / hide the toolbar
57      protected void ToggleListview()
58      ...{
59         bool visible = VisibleAction.Checked;
60
61         // Hide if the toolbar was previously shown, and other way around.
62         if (visible)
63         ...{
64            Context.ClientPage.ClientResponse.SetStyle("ToolbarRow", "display", "none");
65         }
66         else
67         ...{
68            Context.ClientPage.ClientResponse.SetStyle("ToolbarRow", "display", "");
69         }
70         
71         // Remember to persist the current visibility status, both in the viewstate
72         VisibleAction.Checked = !visible;
73         // and also in the globally persisted storage. This way it will also be available
74         // to this user next time he starts the application.
75         Registry.SetBool("/Current_User/Visibility sample/VisibilityStatus", !visible);
76      }
77   }
78}

4.  Code-beside

The application with the toolbar is hidden: