Movatterモバイル変換

[0]ホーム
URL:

In: content-servicesIn: All docs
Close
Alfresco Content Services

Surf Dashlets Extension Point

The Share web application has a special page called Dashboard, which contains windows (think Portlets) of content called dashlets. Currently most of these dashlets are Spring Surf dashlets, but they will eventually be converted to Aikau dashlets.

Architecture Information:Share Architecture

Description

The following picture shows a User Dashboard with a number of Dashlets, such as My Sites and My Tasks:

dev-extensions-share-user-dashboard-dashlets

You can implement your own custom dashlets that can be added to either the User Dashboard or the Site Dashboard.

Creating a Surf dashlet is the same thing as creating a Surf web script. Before continuing read through theSurf Web Scripts section. The controller of the dashlet presentation web script will usually call a Data web script on the repository side to get the content that should be displayed in the dashlet.

Let’s look at an example of a custom dashlet, the following picture shows a Member Directory dashlet that can be used to search the User/People directory:

dev-extensions-share-user-dashboard-member-dir-dashlet

This dashlet is implemented using a presentation web script, which in turn uses a Data web script to get the people matching the Search Filter parameter. The following picture illustrates:

dev-extensions-share-web-scripts-presentation-and-data

In this case we have a Spring Surf Web Script on the Share side that will, in its controller, call a repository web script (that is Data Web Script) to get a list of person records in JSON format. The controller looks something like this:

// Get args from the Share page URLvar filterValue = page.url.args["filter"];var connector = remote.connect("alfresco");var peopleJSONString = connector.get("/api/people?filter=" + filterValue);// create json object from datavar peopleJSON = jsonUtils.toObject(peopleJSONString);model.people = peopleJSON["people"];

The controller makes use of a special root object calledremote, which is used to connect to a remote service, such as the repository, and get data. The JSON data is returned from a repository web script) (that is, a Data web script), which in its controller uses the public API to fetch person information matching passed in Search Filter (that is,filter).

The repository web script uses a root object calledpeople to search for person info. This root object is Content Services specific and is only available in repository web scripts.

Now, to create a dashlet web script you also need a descriptor, which is defined in XML and looks something like this:

<webscript>    <shortname>Member Directory</shortname>    <description>Provide Search of people and display in a list</description>    <family>user-dashlet</family>    <url>/components/dashlets/member-directory</url></webscript>

The descriptor looks like any other web script descriptor except thefamily parameter, which can have the following values:

  • user-dashlet - A web script that implements a dashlet that can be added to a User Dashboard
  • site-dashlet - A web script that implements a dashlet that can be added to a Site Dashboard
  • dashlet - A web script that implements a dashlet that can be added to any Dashboard

The Dashlet UI needs to be implemented in the web script template as follows:

<#-- JavaScript Dependencies<@markup></@>--><#-- Stylesheet Dependencies<@markup></@> --><#-- Surf Widget creation<@markup>    <@createWidgets group="dashlets"/></@>--><@markup>    <@uniqueIdDiv>        <#assign id = args.htmlid?html>        <#assign dashboardconfig=config.scoped['Dashboard']['dashboard']>        <div>            <div>${msg("member.directory.dashletName")}</div>            <div>                <div>                    <div>                        <form name="input"                              action="${url.context}/page/user/${context.user.id}/dashboard"                              method="get">                        ${msg("member.directory.searchFilter")}: <input type="text" name="filter" />                            <input type="submit" value="Search" />                        </form>                    </div>                </div>                <p valign="top">                    <span>${msg("member.directory.searchResult")}</span>                    <#list people as p>                        <br/>                        <a href="${url.context}/page/user/${p.userName}/profile">                        ${p.firstName} ${p.lastName} (${p.email})                        </a>                    </#list>                </p>            </div>        </div>    </@></@>

Here we are not using any custom client side JavaScript or CSS. Instead we use a simple HTML only based UI with default out-of-the-box styling. In the markup you will see references to i18n labels such${msg("member.directory.searchResult")}. These messages are defined in the web script properties file as follows:

member.directory.dashletName=Member Directorymember.directory.searchFilter=Search Filtermember.directory.searchResult=Search Result

Deployment - App Server

  • tomcat/shared/classes/alfresco/web-extension/site-webscripts (Untouched by re-deployments and upgrades)
  • tomcat/webapps/share/components/dashlets (when web resources are included you need to put them directly into the exploded webapp, this is NOT recommended.)

Best practice is to put the files in a directory that explains what they are for, such as for example:

tomcat/shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/training/components/dashlets

Deployment All-in-One SDK project

  • aio/share-jar/src/main/resources/alfresco/web-extension/site-webscripts/{custom path}
  • aio/share-jar/src/main/resources/META-INF/resources/share-jar/components/dashlets (when web resources such as CSS and JS are included)

More Information

  • Share Extras Project - Contains loads of Dashlets, good place to go and look at how different types of Dashlets can be implemented.

Sample Code

Tutorials

Edit this page

Suggest an edit on GitHub
By clicking "Accept Cookies", you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.View Cookie Policy.
[8]ページ先頭
©2009-2025 Movatter.jp