The Toolkit now has profile suport!

  • Article

Yesterday we checked in some new base functionality to the Tookit (sure is nice having the extender stuff in the project!).  Several customers have asked for the ability to persist settings in profiles, specifically things like Drag Panel Locations. But I can never leave well enough alone, so I wanted to figure out a way to make this general across the Toolkit. I'm pretty happy with it, hopefully it makes sense to you as well.

Making it work is simple, here’s the quick summary, feedback welcome.

To load a property value from a profile, assuming you have this profile setup in your web.config:

<profile enabled="true">

       <properties>

       <add name="panelCollapse" type="System.Boolean"

                                          defaultValue="false"/>

       <add name="dragLocation" allowAnonymous="true"

                                          defaultValue="50,300"/>

       </properties>

</profile>

To make this work, you need to have the profile service also declared in your web.config (this comes from the web.config which ships with Atlas, see the docs for details):

<microsoft.web>

<webServices enableBrowserAccess="true"/>

<profileService enabled="true" setProperties="*" getProperties="*"/>

</microsoft.web>

You use this syntax (note we also added a Location property to the DragPanel):

<act:DragPanelExtender ID="dp1" runat="server">

     <act:DragPanelProperties TargetControlID="Panel2"

                         DragHandleID="Label1">

  <ProfileBindings>

             <act:ProfilePropertyBinding

                  ExtenderPropertyName="Location"

                  ProfilePropertyName="dragLocation" />

         </ProfileBindings>

    </act:DragPanelProperties>

</act:DragPanelExtender>

<act:CollapsiblePanelExtender ID="cpe1" runat="server">

  <act:CollapsiblePanelProperties TargetControlID="Panel1" ExpandControlID="Label1" CollapseControlID="Label1">

  <ProfileBindings>

        <act:ProfilePropertyBinding

                 ProfilePropertyName="panelCollapse"

                 ExtenderPropertyName="Collapsed" />

     </ProfileBindings>

   </act:CollapsiblePanelProperties>

</act:CollapsiblePanelExtender>

           

In the DragPanel example, this will cause value “dragLocation” to be loaded into the extender property “Location” when the class is instantiated on the client side. Note this syntax allows for multiple bindings on a given component. Cool, huh?

 

If you’re using the ClientPropertyNameAttribute on a property, meaning the name of the property you’re exposing to managed code isn’t exactly the same as the client-side property you want to target, we’ll respect that as well:

[ClientPropertyName("location")]

public Point Location { … }

So under-the-covers, this will actually hook up to the behavior’s “location” property.

Two-way binding will work automatically as well, provided you fire a property change notification in your Javascript code. If you do this, it will just work. We promise. If you don’t do this, the profile values will never get updated, but the one way binding will still work.

this.set_Collapsed = function(value) {

       

   if (value != this.get_Collapsed) {

       this._toggle();

       this.raisePropertyChanged('Collapsed');

   }

}

So that’s how it works, let me know if you have questions or feedback.