Portal Remote Control customization in SN7

The next step on our road to SN7 was to make the Portal Remote Control (PRC) customizable. Since the PRC is built-up with action links, based on SN7’s templating, the newly created templates enabled us to create skinnable solutions for the admin tasks as well. Thus, with SN7 you will be able to build not only a fully customizable UI for end-users, but also develop skin-related content- and site-administration interface, that is handy and easy to use for your editors and admins.

The current version of Sense/Net has only one, globally defined view for rendering the PRC which is stored in the System/Webroot folder. Therefore, if you need to customize it you can do it only in this ascx file resulting in the fact that the control can only be rendered one way, even if you have multiple sites with multiple skins. In SN7 we wanted to provide our clients with more flexibility. In the new version, this view can be moved into every skin as a module of Sense/Net. If you place your own, customized copy of the default prc.ascx file into your skin’s/skins’ Module folder in the folder structure, you will be able to define an individual, skin-related markup of the control.

This way you can create your custom view for the PRC, which will be loaded by your chosen skin.

In the current version, the PRC control is part of the Pagetemplates, and the control renders both the PRC-dialog and the button which opens and closes the dialog. In the new version we separated these two things, so you can easily place a button where and how you need it into your Pagetemplates HTML markup. The only thing which must be added to your button is the data-toggleprc parameter:

<a class="sn-foundation-prc-open" data-toggleprc title="Open PRC">
<span class="fa fa-cogs"></span>
</a>

The PRC control should be added to the Pagetemplate and to get the functionality and the styles you need to refer the prc.js and the prc.css into your custom view. As mentioned before, the control is fully customizable by placing the js and the css file in the appropriate folders, and making the necessary changes to the PRC, if any. In the demo contents we used the Font-awesome css toolkit to display icons on the PRC.

Adding the Portal Remote Control to the Pagetemplate works the same way as in the old versions.

<snpe:portalremotecontrol id="RemoteControl" 
runat="server" 
groups="/Root/IMS/BuiltIn/Demo/Developers;/Root/IMS/BuiltIn/Portal/Administrators" />

To demonstrate PRC customization we created two sample solutions – just like in the case of the ActionLinkButtons – one with bootstrap and one with foundation. Both of them have their custom view, js and css file use the advantages of the mentioned frameworks in creating responsive ui and optimizing data and structure for devices in any type or size.

The prc view is actually a list of ActionLinkButtons and they have their own template (prcbutton.html). There are also device-aware classes on the controls for hiding some of the actions on mobile and tablet devices. These are based on the ui frameworks’ visibility classes.

<sn:ActionLinkButton CssClass="show-for-large-up hide-for-touch" ID="WebPartDisplayMode" 
runat="server" ActionName="WebPartDisplayMode" 
ContextInfoID="ContextInfoPage" IncludeBackUrl="false" Template="prcbutton.html" 
ToolTip="Switch page mode"></sn:ActionLinkButton>

The related js file contains functionalities like open, close, resize, etc. beyond the PRC’s initialize method, which can be called outside the control:

SN.PortalRemoteControl.open(button, container);

In the following period, continuing the work on SN7, we are working on an API documentation which will contain the JavaScript API references in details, providing you with all necessary information about widgets, plugins, configs, and parameters.

 

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