Client-side action framework

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.3
  • Enterprise
  • Community
  • Planned

Overview

Action link

In Sense/Net ECMS most of the Content operations are done via actions. From the builders' point of view these actions are HTML links (<a> tags) that either navigate to a page or execute a Javascript code. The underlying Application determines what happens when a user clicks on the link. This article describes a way for portal builders and developers how to generate action links on the client side, using the client-side action framework provided by Sense/Net ECMS.

Details

When you build your pages using Sense/Net ECMS you will soon encounter a need for displaying action links to let users achive certain tasks (e.g. editing or deleting a content). You can do that using the Action Presenter Portlet or placing an ActionLinkButton (an Asp.Net server control) into the Content View. However there are cases when you are working mostly with client-side code: HTML and Javascript. Sense/Net ECMS has a built-in client-side action framework that makes displaying action links a lot easier and saves you from building the action links manually. We make sure that the link contains all the necessary CSS classes and URL components that make the action link display correctly and be functional.

This framework builds on the possibilities of the OData capabilities of Sense/Net ECMS.

Generating an action link

Action-related methods can be found in the SN.Actions Javascript namespace - the file that you will need to import is the following:

  • $skin/scripts/sn/SN.Actions.js

To generate an action link you will need to call the following method. You will need to provide at least the JSON object of the content (wrapped into a client-side Javascript Content object) and the name of the action in an options object.

var markup = SN.Actions.getActionLinkMarkup(content, { ActionName: 'Edit' })

The generated markup can be added to any HTML container using JQuery:

$('#actionContainer').append(markup);

The Content object

Currently this object contains only the JSON content received through an OData request. In the future this type will have a couple of helper methods you will be able to use for handling content on the client side. To create the Content object, create a new object the usual way, initializing it with a JSON markup:

var content = new SN.Content(odataresponse['d']);

Please note that if only the action name is given among the options, the JSON content data must contain the expanded Actions property.

Options

The following list contains all the proprties you can set through the options parameter of the function. Either one of the first two properties (ActionName or Action) must be provided. If a full Action is provided, ActionName is ignored.

  • ActionName: name of the Action that determines the Application (ie.: 'Browse' or 'Edit').
  • Action: a full JSON representation of an Action as returned by an OData request. This is useful if you are displaying multiple actions in a scenario that have the same name.
  • Icon: name of the icon to be displayed (e.g. 'edit'). If omitted, the Icon of the referred Action (or the content icon if the options below are set accordingly) will be rendered. Icons reside in the /Root/Global/images/icons folder.
  • IconUrl: path of the icon file to be displayed. Overrides the Icon property.
  • UseContentIcon: displays the icon of the target content (e.g. a Word document) instead of the action icon when set to true. Overrides the Icon and IconUrl properties. Default value is false.
  • IconVisible: hides the Action icon when set to false. Default is true, icon is rendered.
  • IconSize: specifies the icon size to be used when rendering the Action icon. Default is 16.
  • IncludeBackUrl: specifies if the current url should be passed as a backurl parameter when the rendered Action link is clicked. Default is true.
  • ParameterString: custom url parameters can be provided for the Action link.
  • CssClass: the given CSS class will be added to the <a> tag.
  • Style: determines the CSS class of the <a> tag. Currently possible value: 'button'.

Icon overlay

Currently it is not possible to display an icon overlay automatically using this method.

Examples

Action link with custom text

The following code displays an Edit action without icon with a custom text on the link.

$.getJSON("/OData.svc/workspaces/Sales('chicagosalesworkspace')?$expand=Actions",
	null,
	function (o) {	    
        $('#actionContainer').append(SN.Actions.getActionLinkMarkup(new SN.Content(o['d']),
        {
             ActionName: 'Edit',
             Text: "General settings (Name, Versioning, etc.)",
             IconVisible: false
        }));
    });

Custom parameter string

This Action link will navigate to the Add page of the Sales workspaces' container. The invoked Application will create a new Content of Sales_Workspace Content Type. In the custom parameter string we switched off the back url and replaced it with a backtarget parameter that will navigate the user to the newly created workspace after the creation process.

$.getJSON("/OData.svc/workspaces('Sales')?$expand=Actions",
	null,
	function (o) {	    	    
         $('#actionContainer').append(SN.Actions.getActionLinkMarkup(new SN.Content(o['d']),
        {
             ActionName: 'Add',
             ParameterString: "ContentTypeName=/Root/ContentTemplates/SalesWorkspace/Sales_Workspace&backtarget=newcontent",
             Text: "New Sales workspace",
             Style: "button",
             IncludeBackUrl: false,
             IconUrl: "/Root/Global/images/icons/16/add.png"
        }));
     });

Related links

References

There are no external references for this article.