Telligent Evolution Platform - Blog

Extensibility points for building an application on top of the Telligent Evolution Platform.

2012-01-25T13:18:41Z

Today I was responding to a customer query which involved me giving a listing of some of the more useful extensibility points that are most likely be used when building a custom application within the Telligent Evolution Platform. I’m reproducing this here as I feel it may be useful to others.

N.B. this is not an exhaustive list. For full documentation of extensibility points in Telligent Evolution 6.0, see refer to the online documentation.

Widgets

IScriptedContentFragmentExtension – use this to expose custom data to Studio Widgets
IScriptedContentFragmentFactoryDefaultProvider – Load your applications custom widgets as factory defaults so the user can revert back. Can also be used as one approach for storing widgets in Source Control.

(These can be found at Telligent.Evolution.Extensibility.UI.Version1 in Telligent.Evolution.ScriptedContentFragments.dll)

Navigation

ISiteCustomNavigationPlugin – allow easy addition of a link to your application to site wide navigation
IGroupCustomNavigationPlugin - to allow easy adding of a link to your custom application
IGroupDefaultCustomNavigationPlugin – add a link to your application to the default group navigation.
IGroupNewPostLinkPlugin – add links to your application in the New Post drop down in a group.

(These can be found at Telligent.Evolution.Extensibility.UI.Version1 in Telligent.Evolution.Components.dll)

Plugins

IPlugin – allow initialisation logic so that users can enable/disable a feature
IConfigurablePlugin – capture configurations settings related to your app
IPluginGroup – Group multiple plugins into a single plugin that can either be all enabled, or all disabled.

(These can be found at Telligent.Evolution.Extensibility.Version1 in Telligent.Evolution.Components.dll)

Core Objects

These can be accessed from the Public API Telligent.Evolution.Extensibility.Api.Version1.PublicAPI (in Telligent.Evolution.Api.dll)
- Users
- Groups
- Etc.

(These can be found at Telligent.Evolution.Api.Version1.PublicApi in Telligent.Evolution.Components.dll)

Other Services

Search - Telligent.Evolution.Extensibility.Api.Version1.PublicApi.Search
File Storage - Telligent.Evolution.Extensibility.Storage.Version1.CentralizedFileStorage.
Caching – Telligent.Evolution.Extensibility.Caching.Version.CacheService

(These can be fund in Telligent.Evolution.Api.dll)

Improving Documentation Part 1 – Inline Table of Contents

2010-11-08T17:51:00Z

If you’ve been watching the documentation on http://telligent.com over the past 6 months or so, you’ll have noticed some big improvements to how easily you can read through our documentation. There are lots of improvements we have made, but three of the big ones I’d like to highlight are

Source Code Formatting
Inline Table of Contents
Custom styles

In this blog post, I’m going to concentrate solely on the Table of Contents, and in part 2, I’ll discuss the Custom Styles used, and how we’ve made it easier to use these styles in the text editor.

Inline Table of Contents

The Table of Contents addon is an extension we built for allowing easy navigation within a Wiki article (now available in the Telligent Marketplace). The Table of Contents is the Grey “In this Article” box on the pages. For example, if you look at the Installation document for Telligent Evolution, you’ll see the table of contents looking like:

The Table of Contents serves two main purposes

Provides an outline of the article
Allows readers to easily navigate the article by clicking on the link to the section they want to read.

It incredibly simple to use. Make sure you use H2,H3 and H4 tags when Simply add the text [toc] into the article where you want the Table of Contents to be, and then add the text [toc] into an article where you want the Table of Contents to be displayed to the reader. The addon can be used in wiki pages, blog posts, media uploads and even forum posts.

What are you waiting for, go get the Table of Contents from the Telligent Marketplace.

Using Syntax Highlighter with Telligent Evolution

2010-09-20T10:55:08Z

Syntax Highlighter is a code syntax highlighter written in Javascript. The following blog post describes how you can use Syntax Highlighter with your Telligent Evolution platform Community, taking you first through setting up the Syntax Highlighter scripts and then installing a plugin for the text editor to make using Syntax Highlighter easier.

Install The Syntax Highlighter Scripts
Install the SyntaxHl TinyMCE plugin
Using the Syntax HL Plugin
Troubleshooting

Install The Syntax Highlighter Scripts

Note, the following instructions assume that you are running your Telligent Evolution platform community at the root of your domain. If you are not, you will need to modify the paths for scripts and stylesheets to match the subdirectory your community is installed to.

Download the Syntax Highlighter 3.0 files from http://alexgorbatchev.com/SyntaxHighlighter/download/
Extract the contents of that download to a folder in your Telligent Evolution platform community (e.g. ~/SyntaxHighlighter/)

Go to your community, login as an administrator and go to Control Panel > System Administration > Site Administration > Site Configuration > Setup > General Site Settings

In the “Raw Header” field, add the stylesheets required by Syntax Highlighter.

<link href="/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="/SyntaxHighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

In the Google Analytics field, add the javascript required by the plugin

<script src="/SyntaxHighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="/SyntaxHighlighter/scripts/shAutoloader.js" type="text/javascript"></script>

<script type="text/javascript">
SyntaxHighlighter.autoloader(
   'applescript            /SyntaxHighlighter/scripts/shBrushAppleScript.js'
  ,'actionscript3 as3      /SyntaxHighlighter/scripts/shBrushAS3.js'
  ,'bash shell             /SyntaxHighlighter/scripts/shBrushBash.js'
  ,'coldfusion cf          /SyntaxHighlighter/scripts/shBrushColdFusion.js'
  ,'cpp c                  /SyntaxHighlighter/scripts/shBrushCpp.js'
  ,'c# c-sharp csharp      /SyntaxHighlighter/scripts/shBrushCSharp.js'
  ,'css                    /SyntaxHighlighter/scripts/shBrushCss.js'
  ,'delphi pascal          /SyntaxHighlighter/scripts/shBrushDelphi.js'
  ,'diff patch pas         /SyntaxHighlighter/scripts/shBrushDiff.js'
  ,'erl erlang             /SyntaxHighlighter/scripts/shBrushErlang.js'
  ,'groovy                 /SyntaxHighlighter/scripts/shBrushGroovy.js'
  ,'java                   /SyntaxHighlighter/scripts/shBrushJava.js'
  ,'jfx javafx             /SyntaxHighlighter/scripts/shBrushJavaFX.js'
  ,'js jscript javascript  /SyntaxHighlighter/scripts/shBrushJScript.js'
  ,'perl pl                /SyntaxHighlighter/scripts/shBrushPerl.js'
  ,'php                    /SyntaxHighlighter/scripts/shBrushPhp.js'
  ,'text plain             /SyntaxHighlighter/scripts/shBrushPlain.js'
  ,'py python              /SyntaxHighlighter/scripts/shBrushPython.js'
  ,'ruby rails ror rb      /SyntaxHighlighter/scripts/shBrushRuby.js'
  ,'sass scss              /SyntaxHighlighter/scripts/shBrushSass.js'
  ,'scala                  /SyntaxHighlighter/scripts/shBrushScala.js'
  ,'sql                    /SyntaxHighlighter/scripts/shBrushSql.js'
  ,'vb vbnet               /SyntaxHighlighter/scripts/shBrushVb.js'
  ,'xml xhtml xslt html    /SyntaxHighlighter/scripts/shBrushXml.js'
);
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>

Save the page

At this stage, you should now be able to use syntax highlighter by manually editing the HTML of your posts to include the required syntax for Syntax Highlighter to do it’s work (e.g. <pre class="brush: xml">Here is some code</pre> ), however there is an extension for the Text Editor used by Telligent Evolution that makes it easier to insert code without having to manually edit the HTML.

Install the SyntaxHl TinyMCE plugin

There is a SyntaxHl plugin for TinyMCE which makes it easier to insert code samples into content through the TinyMCE text editor. To install this plugin:

Download the SyntaxHL plugin from http://github.com/RichGuk/syntaxhl
Copy the contents of the download to ~/tiny_mce/plugins/syntaxhl/

Add the following entries to your communityserver_override.config file to register the SyntaxHL plugin

<!--
	TinyMCE extensions for Syntax Highlighter
	- requires SyntaxHl extension from http://github.com/RichGuk/syntaxhl
-->
<!-- Add Pre to the format selection list -->
<Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='theme_advanced_blockformats']" mode="change"
			 name="value"
			 value="'h2,h3,h4,p,pre,div'"
			 />
<!-- Register the SyntaxHL Plugin -->
<Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']/editorOption[@name='plugins']" mode="change"
			 name="value"
			 value="'advhr,advimage,advlink,contextmenu,emotions,fullscreen,iespell,insertmedia,insertvideo,paste,safari,smilies,spellchecker,table,syntaxhl'"
			 />
<!-- Add the SyntaxhHL button -->
<Override xpath="/CommunityServer/Core/editors/editor[@name='Enhanced']" mode="add">
	<editorOption name="theme_advanced_buttons2_add" value="'syntaxhl'" />
</Override>

Using the Syntax HL Plugin

Now when you use the text editor, you should see a syntax highlighter button on the right of the bottom row.

Upon clicking this button, you will get a window which allows you to paste in your code sample, specify the language the code is written in, as well as a few more configuration options supported by Syntax Highlighter.

When you save your content, you should see the code highlighted in colour when you view it. For example, submitting the code in a forum post gives

Troubleshooting

If you have problems, then you most likely haven’t specified the correct path to the syntax Highlighter scripts in the “Install the SyntaxHl TinyMCE plugin” section. Use a tool such as Fiddler to view the HTTP Traffic when you view a page containing some code blocks configured for Syntax Highlighter – check your browser is successfully requesting the javascript and stylesheet files. You should also check your browsers for any javascript errors.

Styling Widgets

2010-08-19T14:13:51Z

In this blog post, I’m going to discuss various ways in which you can restyles widgets in the Telligent Evolution platform. This article assumes you have basic knowledge of CSS, and and have had some experience with either the fiji theme from Telligent Community, or the evolution2 theme from Telligent Enterprise. All the examples in this blog post will use Telligent Enterprise’s evolution2 theme, but the same concepts apply for Telligent Community’s fiji theme as well as any custom themes you may create.

Structure of a Widget
Targeting a particular type of widget
Targeting particular styles of widgets
Targeting widgets in a particular region
Targeting an individual widget
Targeting Widgets on a particular Page
Targeting Widgets on a particular page layout
Putting it all together
Conclusion

Structure of a Widget

Widgets in the Telligent Evolution platform typically have three Css Classes

content-fragment
a class name indicating the type of widget ( e.g. blog-post-list) . This is generated from the class name used by the widget)
a class name indicating the layout of the widget (e.g. full-border)

Within this widget, there are three main areas

Header (<div class="content-fragment-header" />)
Content (<div class="content-fragment-header" />)
Footer (<div class="content-fragment-header" />)

To demonstrate these three regions, add the following CSS to the CSS Overrides section of your theme’s configuration.

.content-fragment
{
  border: 10px solid #9f9;
}
.content-fragment .content-fragment-header {
   background-image: none  !important;
   background-color: #666  !important;
   color: #fff  !important;
   border: none !important;
}

.content-fragment .content-fragment-content {
   background-color: #ccf;
   border: none !important;
}

.content-fragment .content-fragment-footer {
   height: 5px;
   background-color: #f00;
}

This will transform a widget in the Telligent Enterprise Theme as follows.

Targeting a particular type of widget

Above, i mentioned that widgets included a CSS class indicating the type of the widget. We can use this to make our CSS Selectors more specific so that they only target a particular type of widget. Let’s say we want to target the Generic Content widget, we can use a tool such as Firebug for Firefox, or the IE Developer Tools to inspect a Generic Content widget. We can see that the Generic Content widget has a "html-content” css class which is the class used to indicate a Generic Content Widget.

So to style just Generic Content widgets, instead of targeting just elements with the content-fragment class, we want to target all elements with the content-fragment AND html-content class. For example, if we wanted to make the content of all generic content widgets larger and bold, we could use the following CSS:

.content-fragment.html-content .content-fragment-content
{
  font-size: 1.2em;
  font-weight: bold;
  color: orange;
}

Targeting particular styles of widgets

This is very similar to targeting widgets of a particular type. If you use a tool such as Firebug to inspect the HTML of a widget, you’ll see a CSS Class indicating the style of the widget. For example, say we want to target all widgets using the No Wrapper with Spacing or No Wrapper with No Spacing options We can use the following CSS.

.content-fragment.no-wrapper
,.content-fragment.no-wrapper-with-spacing
{
  background-color: #9f9;
}

Gives us

Targeting widgets in a particular region

If you have a look around the HTML structure using Firebug, you’ll see that widgets are placed within layout regions. You can use these layout regions to target only widgets in a particular areas of the page. Say for example we want change the colour of headers in the left and right sidebars, we can use the following CSS

.layout-region.left-sidebar .content-fragment .content-fragment-header
,.layout-region.right-sidebar .content-fragment .content-fragment-header
{
  background-image: none;
  background-color: #ccc
}

Targeting an individual widget

Be careful using this technique as the ID of a widget can sometimes change when a page is edited – see Ben Tiedt’s comment below.

If you use Firebug to inspect the markup of a widget, you’ll see that each widget has a unique id fragment-XXXX (where XXXX is an integer). You can use this to target one particular widget. For example, say we want to give the bottom right Generic Content (with an id of fragment-2146) a different coloured header to make it stand out, you could use the followign CSS

#fragment-2146 .content-fragment-header
{
background-image: none;
background-color: #f00;
color: #fff;
}

Targeting Widgets on a particular Page

If you inspect the marrkup of the main page using firebug, you’ll see that all widgets are wrapped in a div with the css class “content-fragment-page”, and an additonall css class based on the page you’re on. You can use this to target just widgets on a particular page. For example to use the Impact font for just widgets on the homepage, use the following css

.content-fragment-page.common-home .content-fragment .content-fragment-content
{
font-family: impact;
}

Targeting Widgets on a particular page layout

Looking a bit deeper into the HTML markup, you’ll see that the main widget area is wrapped in a div with the css class layout-content, and an additional css class based upon the page layout in use. Again, we can use this to target just widgets. For example, say we want to change the border of al widgets on pages using a header, main content and left sidebar

.layout-content.content-left-sidebar-right .content-fragment
{
   border: dotted 5px;
}

Putting it all together

You can combine all these ideas together for some very detailed styling. Let’s say you want to restyle all generic content widgets using the no wrapper layout in the left sidebar of the homepage, when it’s using a header & three column layout. (Quite why you’d want to do something this specific I don’t know, but it’s more a demonstration that it can be done, as opposed to something that you would want to do).

.content-fragment-page.common-home .layout-content.header-top-sidebar-left-content-center-sidebar-right .layout-region.left-sidebar .content-fragment.html-content.no-wrapper .content-fragment-content 
{
  background-image: none;
  background-color: #cfc
}

Conclusion

I hope this post gives you some ideas of different ways in which you can customise widgets in themes. If you have a look around my website, you’ll see I have some custom CSs that specifically restyles any widgets usingthe No Wrapper styles. I have also updated all sidebar widgets to use the No Wrapper style to give my site a unique look. I have also updated the header of other widgets to have a gradient background, and removed the rounded corners from the bottom of widgets.

Permission Viewer Tool

2010-06-02T13:44:00Z

The permission viewer application is a diagnostic tool for viewing permissions in a Telligent Evolution platform community. It allows you to view permissions in a tabular form which can make diagnosing permission based issues easier.

The application may be downloaded from github, where the source code is also hosted.

Set up your Community

This application uses the REST API to communicate with the Telligent Evolution platform. You must first enable the REST API and then generate an API Key for your user account within your Telligent community.

Connecting with the Application

In the connection area at the Enter the URL to your Telligent community and hit Connect
The Application will try and connect to your website. After a moment a new row will pop up asking for your Username and API Key. Depending on how your community is configured, you may also be required to enter a password. Enter the requires details and then hit Login

Understanding the Permission Report

The permission report is displayed as a grid with roles listed along the top of the table, and a list of permissions down the left hand side. If a role is granted a permission, the cell corresponding to the permission and role will have a green colour with an X in.

Roles are always listed in the following order: Everyone, Registered Users,Members, Managers, Owners, Moderators, Administrators, OTHER ROLES

If you do not see a role listed in the table, that means the role has no permissions for that application

Viewing Permissions for an Individual Application

In order to view permissions for a particular application, you first need to select an application. After doing this, permissions will be displayed in a table in the Permission Display area on the right. There are two ways of selecting an application:

Browsing for an Application

Select the Browse tab in the Application Selector area
Browse through the tree to find the application you want to view permissions for
Click on the Application to view it’s permissions

Searching for an Application

Click on the search tab in the Application Selector area
In the search box, type in your search query then hit Search to search for applications
Click on the Application you want to view permissions for

Viewing Site Wide Permissions

When you first connect to your community, you will be shown Site Wide permissions. If you have started viewing permissions for an individual application, you can return to this page by hitting the Show Site Permissions button in the bottom right

Exporting Permission Reports

You can export the permission grid for an application to an HTML report. This HTML report will include the permissions for the currently selected application, and groups above it.

Show the permissions you wish to export
Click on the “Export Permission Report” button in the bottom right
In the Save As dialogue, choose a location to save the report and press Save.

AlexCrome.Evolution 5.0 Addons for the Telligent Evolution Platform

2009-08-28T21:32:00Z

After a period of inactivity I am finally ready to publish the 5.0 version of my addons which have been upgraded to be compatible with the Telligent Evolution Platform (that is Teligent Community and Telligent Enterprise)

New Functionality

The following is a list of the main new features since the previous version. For a full list of functionality see the documentation.

New Classic Forum Display Widget – The Classic Forum Display widget displays a list of forums in a particular group and direct sub groups, grouped by the group the forums are in
Table of Contents redesign – The Table of Contents addon has had a makeover to better fit into the new theme
Mange Addons page is now a widget – The Manage Addons page has been moved out of the control panel and into a Manage Addons Configuration widget – this prevents upgrades from removing the link to the Manage Addons page in the Control Panel.
General Refactoring – Improvements have been made to the underlying codebase which make it easier to write additional Configurable Addons and deal with Dynamic Configuration. I shall be blogging a more about this in the future.

Removed Functionality

The following features have been removed since AlexCrome.CS 2008.5.

Quick Reply – this is now implemented out of the box
Copy Wiki Page to Blog
Refresh Cache on Comment
Set Anonymous User Roles
Subscribe to Hub on Join