ActionLinkButton templating in SN7

As we mentioned in the previous post about the new Skin System in Sense/Net 7 we are working hard to improve Sense/Net’s customizability and maintainability. We’ve started with the Page Templates and now we’re working on rewriting all the views and controls one by one. Since the ActionLinkButton control is one of the smallest building blocks of Sense/Net and it’s the basic element of the main controls and portlets like the Portal Remote Control, we’ve decided to start with this to work on our new templating method.

Concept and structure

Our main concept behind the templating (as with the new Skin System) is to let developers customize every part of the UI and help them to keep all of their custom UI code in one place under their custom skin. So the Page Templates along with all other old and new templates will be moved into the skin in a predefined structure.

Skin structure

We created a new parent folder called Templates in the Skin folder structure to keep all of them (PageTemplates, FieldControlTemplates, GridCellTemplates, ActionLinkButton templates, etc) in one place. In this parent folder we also created a new folder called action for storing ActionLinkButton templates. These templates will be processed like other Skin related stuff in Sense/Net: if you have the template in your skin, the system will use the Skin related template to render ActionLinkButtons. If the template is missing in your Skin, the system will fallback to the default template.

Templating in SN7

For ActionLinkButton templating we decided to use HTML templates instead of ascx templates so the customization will be easier by creating your custom HTML structure and adding some custom CSS classes. For HTML templates we created a custom CTD called HTMLTemplate, so if an HTML file is uploaded or added with this definition, it can be handled and used as a template.

Since we’re using KendoUI, it seemed reasonable to use the same syntax in Sense/Net HTML templates too, so you can reach and use properties from the ActionLinkButtons this way:

 

<a class="sn-actionlinkbutton #= class #">#= text #</a>

 

ActionLinkButton available parameters in templates:

 

ActionLinkButton control parameter

Templated values

Description

Text

#= text #

Displayed as the text of the button.

 

#= url #

Url of the action.

CssClass

#= class #

CSS class that can be used on the button.

ActionName

#= name #

Name of the action.

Tooltip

#= title #

Title of the button.

IconUrl

#= iconurl #

Path of the Icon Content to be displayed.

IconName

#= iconname #

Name of the Icon to be displayed.

IconSize

#= iconsize #

Class based on size of the icon that will be displayed (e.g. 16).

 

#= iconsizeclass #

Full class based on size of the icon that will be displayed (e.g. sn-icon-16).

Enabled

#= disabled #

Determines if the link will be disabled for some reasons (e.g. permissions)

 

#= onclick #

Onclick param with the function that will be called.

Overlay

#= overlay#

Class of the overlay element (e.g. checked-out)

 

#= overlayclass#

Full class of the overlay element (e.g. sn-overlay-checked-out)

You can learn more about ActionLinkButton here and about KendoUI’s templating here.

The ActionLinkButton control have new property names Template where you can define which template you want to use to render your action link.

<sn:ActionLinkButton ID="EditButton" runat="server" ActionName="Edit" 

Text="Edit" ContextInfoID="myContext" Template="button.html" />

As you can see you do not have the template’s url because the system can load the appropriate template by the current Skin.

Template samples

As we mentioned in the previous Skin System related post while we’re working on make everything skinable we’re making samples about the new things in two new skins based on Foundation and Bootstrap. So three new HTML template were created in both skins for displaying ActionLinkButton as a button or a link.

 

Button.html

This template is for displaying an ActionLinkButton as a button. Both mentioned UI framework has custom CSS classes for displaying buttons so with adding these custom classes we’ve create Bootstrap and Foundation based buttons.

If you prefer Foundation, you can use the button class with the additional coloring classes like secondary or alert. (Learn more about Foundation’s button styling here.)

Displaying your button as a Bootsrap-styled element use the btn class and for coloring you can add classes like btn-default, btn-primary, etc. (Learn more about Bootstrap’s button styling here.)

In this case we’ve added a span element in our button markup, so we can display the related icon with custom icon font or with an icon image-sprite. If you add the iconname property of the ActionLinkButton as a CSS class of this span element you will be able to add and customize the icon with CSS.

Solution with Foundation:

<a class="sn-actionlinkbutton button #= class #" #= disabled # href="#= url #" #= onclick #>

<span class="fa sn-icon sn-icon-#=iconname# sn-overlay #=overlayclass#"></span>#= text #

</a>

Foundation button

Solution with Bootstrap:

 

<a class="sn-actionlinkbutton btn btn-primary #= class #" #= disabled # href="#= url #" #= onclick #>

<span class="fa sn-icon sn-icon-#=iconname# sn-overlay #=overlayclass#"></span>#= text #

</a>

Bootstrap button

 

ImageButton.html

This template is almost the same as the previous one except here you can put an image icon into the button which’s url can be set as a parameter on the ActionLinkButton.

Solution with Foundation:

<a class="sn-actionlinkbutton button #= class #" #= disabled # href="#= url #" #= onclick #>

   <span class="sn-overlay #=overlayclass#">

    <img src="#= iconurl #" class="sn-icon sn-icon-#= iconname #" title="#= text #" />

   </span>#= text #

</a>

Foundation button with image

Solution with Bootstrap:

<a class="sn-actionlinkbutton btn btn-default #= class #" #= disabled # href="#= url #" #= onclick #>

   <span class="sn-overlay #=overlayclass#">

    <img src="#= iconurl #" class="sn-icon sn-icon-#= iconname #" title="#= text #" />

   </span>#= text #

</a>

Bootstrap button with image

 

Link.html

With this template you can display your ActionLinkButton as a simple link without icon and button style.

Solution with Foundation:

<a class="sn-actionlinkbutton #= class #" #= disabled # href="#= url #" #= onclick #>

   #= text #

</a>

Solution with Bootstrap:

<a class="sn-actionlinkbutton btn btn-link #= class #" #= disabled # href="#= url #" #= onclick #>

   #= text #

</a>

It is of course possible to create custom templates too, so if you developed a custom HTML template with your custom markup, put it into the appropriate template folder under your chosen Skin and you’re able to add it as the Template parameter of the ActionLinkButtons. This way you can display fully customized buttons or links on the UI based on Sense/Net’s action/application framework.

 

Comments are closed

Welcome to the blog!

Sense/Net ECM is ever evolving. Community means the world to us so we want to keep you apprised on what’s happening on our side of the woods. Want to make us happy? Add a comment and tell us what you think!

Month List