Documentation

Create and edit a custom portlet

Custom portlet management

Go to:


Portlet templates administration page

The first step in creating or editing a ThoughtFarmer custom portlet is to navigate to the Administration panelCustom portlets section > Create or edit portlets page.

The table on the Create or edit portlets page is your portlet library. This shows every portlet that has been installed on your intranet. The table contains the following information:
  • Name: The name of the portlet. If the portlet has a description, an info icon appears that will display that information.
  • Locations supported: The allowed columns for this portlet to be published to.
  • Modified by: Indicates who last modified this portlet.
  • Modification date: Indicates when the portlet was last modified.
  • Action: Click the gear icon to open a menu with the actions below.
    • Edit: Takes you to the template editor to change the code for the template.
    • Export: Allows you to export the template to a zip file.
    • Delete: Removes the portlet from the intranet (includes all published instances of the portlet).


Importing a portlet

Portlets can be imported into your intranet. When you click on the Import portlet button, a dialog will appear asking you to select the zip file containing the portlet to import. After selecting the zip file and clicking ok, the portlet will be imported and appear in the portlet template listing.


Creating a new portlet

Clicking the Create portlet button will take you to the custom portlet editor screen. This screen has a number of tabs and fields that allow you to modify the custom portlet template.

  • Portlet name: The name of the portlet.
  • Server (C#): This is the tab where the main server template goes. This is where any HTML and code logic goes and is what the user sees when the portlet is run. Clicking the Validate script button will let you know if there are any errors in the template.
  • Client (JavaScript): This is the tab where any JavaScript code that the portlet requires goes.
  • Styling (CSS): This is the tab where any CSS styling used by the portlet goes.
  • Preview: The Preview tab allows you to run the portlet and see how it is currently looking. You can change various Preview settings, and then click Refresh to reload the preview tab.
    • Location: The location dropdown allows you to choose which columns the portlet is allowed to appear in. Wide only allows the portlet to appear only in the center column; Narrow only allows the portlet to appear in the right hand or left hand columns.
    • Preview content id: This is the content id that will be passed into the preview portlet. This is useful if your portlet is only intended to appear on certain pages.
    • Preview user: This is the user the preview will be run as. This is useful if your portlet is intended to be viewed by only certain users.
    • Configure portlet: This is the configuration information that you can pass into the preview instance of the portlet. This is useful if your portlet depends on any configuration before it runs.
  • Details:
    • Portlet width: Select the width that the portlet supports. Flexible means the portlet can appear in any column, Narrow only in the left and right hand columns and Wide only in the center column.
    • Description: This is a description of what the portlet does.
    • Default configuration: If there is information that you need to pass into the portlet when it is run, that goes here. The configuration must be in the JSON object format.
    • More information: This is a URL to a page with more information about this portlet.
Click Save when you are finished creating the portlet.


Edit an existing portlet

Click the gear icon in the Action column beside the portlet you want to edit, and select Edit from the menu that opens to go to the custom portlet editor screen. This screen has a number of fields that allow you to modify the custom portlet template.

The available fields on this page are the same as those described above under the Creating a new portlet heading, with the addition of one field:
  • Version: A dropdown containing all of the different versions of this portlet. Choosing an item from this dropdown reloads the page to show a read-only view of this version. To revert to this version, click the Revert button. Otherwise, click Cancel to return to the most recent version of the portlet.
Click Save when you are finished editing the portlet.
 

Export an existing portlet

To make use of a portlet on another ThoughtFarmer installation, or to archive it outside of the application, you can export the portlet directly from the create or edit portlets page. In the Administration PanelAdvanced options section > Create or edit portlets page, click on the gear icon in the Actions column on the desired portlet. In the dropdown menu, click the Export link and save the generated zip file in the desired location on disk.