Anatomy of a Ning App

A Ning App comprised of several parts that when combined create a new feature on a Ning Network.

Canvas View

The canvas view (also known as tab view) is a standalone page that only displays your application and the right hand column. Members can navigate to this view by clicking on your applications tab in the navigation bar. The Network Creator is the owner of this view. This is the only required view.

The canvas view can be rendered using the view name canvas:

<Content type="html" view="canvas"><![CDATA[
    <!-- canvas view content -->
]]></Content>

In the image below, the CafePress Ning App canvas view is shown. Notice that the CafePress Shop tab is highlighted.

../_images/NingApp-CanvasView.png

Dimensions

Width
737px Any feature less than this width will be centered in the column
Height
There is no height restriction but there may be in the future

Profile View

The profile view of a Ning App is a module that appears on every profile page of the Ning Network’s your application is installed on. The owner of this view is the member who’s profile page you are viewing the application on.

The profile view can be rendered using the view name profile:

<Content type="html" view="profile"><![CDATA[
    <!-- profile view content -->
]]></Content>

In the image below, the Twitter Tacker Ning App is shown on the member’s profile page.

../_images/NingApp-ProfileView.png

If the member clicks on the link in the bottom right corner of the profile view, they can view the profile canvas view. It is the same as the canvas view, but the member is the owner of the view instead of the Network Creator. Notice that the Twitter Tracker tab is not highlighted as it was in the canvas view.

../_images/NingApp-ProfileCanvas.png

Members of a Ning Network can configure settings for their own profile view of a particular Ning App by clicking on the “Edit” button in the upper-right hand corner, or the “Settings” link above the “Quick Add” toolbar in the upper-right hand corner. These include options to:

  • Prevent your application from posting to their Latest Activity feed
  • Prevent your application from sending alerts to their friends
  • Remove the profile view from their profile page

The following image is an example of a member configuring the Twitter Tracker Ning App.

../_images/NingApp-MySettings.png

Dimensions

Width
492px Any feature less than this width will be centered in the column
Height
There is currently no height restriction there may be in the future

Main View

The main view of a Ning App is a module that appears on the main page of the Ning Network. When the Ning App is added to the network and it has a main view it is automatically added to the bottom of the main page. The Ning App can only exist in the center column. The Network Creator can change the position within the center column using the Features Layout management page. The Network Creator is the owner of this view.

The main view can be rendered using the view name home:

<Content type="html" view="home"><![CDATA[
    <!-- main view content -->
]]></Content>

This next image is of the Twitter Tracker Ning App’s main view, placed at the top of the center column.

../_images/NingApp-HomeView.png

Dimensions

Width
492px Any feature less than this width will be centered in the column
Height
There is currently no height restriction there may be in the future

Latest Activity

Latest Activity is a feed of what’s happening on a Ning Network. The Network Creator can display this feed on the home page of the network. Members have a personal activity that they can display on their profile pages.

When a Ning App is added to the Ning Network, a latest activity item is generated. Additionally the Ning App can generate it’s own activity items.

In the example bellow, two Ning Apps have been added and each has posted to the latest activity. Notice that when a Ning App posts to the feed, a link to the application is automatically included.

../_images/NingApp-LatestActivity.png

The Ning App Directory

The Ning App Directory is the place for Network Creators to search and browse for Ning Apps to add to their Ning Network. The detail page of the directory is the about view of your application.

The example below shows the featured category of the Ning Apps directory.

../_images/NingApp-Directory.png

About View

The about view is your application’s information page, it allows the Network Creator to view the description and screenshots of your application. The about view is generated based on the metadata in your <ModulePrefs> declaration. It is accessible from the Ning App Directory.

Bellow is the about view for the CafePress Ning App.

../_images/NingApp-AboutView.png