Create and edit a custom card

Go to:

Manage cards administration page

The first step in creating or editing a ThoughtFarmer custom card is to navigate to the Administration panelUser interface section > Manage cards page.

The table on the Manage cards page is your card library. This shows every custom card that is available on your intranet. The table contains the following information:
  • Name: The name of the card. If the card has a description, an info icon appears that you can click to display that information. You can also click the name to edit the code for the card.
  • Modified by: Indicates who last modified this card.
  • Last modified: Indicates when the card was last modified.
  • Viewable by: When "Admins only" is checked it indicates the card is only able to be added to templates by admin users. Otherwise, anyone with edit permissions to pages may utilize the card.
  • Active: When active, this card will be available to be added to pages and all current instances will render. Deactivating a card will make it unavailable to add to pages. Any current templates using that card will also be set to inactive and not display.
  • Action: Click the gear icon to open a menu with the actions below.
    • Edit card: Takes you to the template editor to change the code for the card.
    • Export card: Allows you to export the template to a zip file.
    • Delete: Removes the card from the intranet including all instances currently added to page templates. NOTE: You cannot delete an active card. It must be deactivated first.

Import a card

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

Create a new card

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

  • Card name: The name of the card.
  • 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. ThoughtFarmer 8 is built on React and we support React components here. However, they must be pure JavaScript. React jsx templates must be precompiled first.
  • Styling (CSS): This is the tab where any CSS styling used by the card goes.
  • Preview: The Preview tab allows you to run the card and see how it is currently looking. You can change various Preview settings, and then click Refresh to reload the preview tab.
    • Preview content id: This is the content id that will be passed into the preview card. 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 card is intended to be viewed by only certain users.
    • Configure card: This is the configuration information that you can pass into the preview instance of the card. This is useful if your card depends on any configuration before it runs.
  • Details:
    • Description: This is a description of what the card does. It will show in the Manage cards admin page
    • Default configuration: If there is information that you need to pass into the card when it is run, that goes here. The configuration must be in the JSON object format.
    • Allow card configuration on edit page: If your card has per instance configuration, then this setting will allow for this to be configured separately for each instance when it is added to page template.
    • More information: This is a URL to a page with more information about this card.
Click Save when you are finished creating the card.

Edit an existing card

Click the gear icon in the far right column in the row for the portlet you want to edit, and select Edit card from the menu that opens to go to the custom portlet editor screen.  Also, if you click on the name of the card you will be brought straight to the editor. This screen has a number of fields that allow you to modify the page template card.

The available fields on this page are the same as those described above under the Create a new card heading, with the addition of one field:
  • Version: A dropdown containing all of the different versions of this card. Choosing an item from this drop-down 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.

NOTE: If you save a new version of a card and there are existing templates that have the card added, you will see a green banner at the top saying "{My Custom} card has been edited. You may want to upgrade the card {My Custom}. Or you can upgrade now." Clicking "upgrade now" will push the update to all cards that are active on page templates.

Export an existing card

To make use of a card on another ThoughtFarmer installation, or to archive it outside of the application, you can export the card directly from the Manage cards page. In the Administration PanelUser interface section > Manage cards page, click on the gear icon to the right of the desired Card. In the dropdown menu that opens, click Export card and save the generated zip file in the desired location on disk.

Global cards

Global cards have the same C#, JavaScript, and CSS components as their page template counterparts. However, the code for these cards will be set to run globally and bypass all per page template configuration. There is a special JavaScript API for placement of global cards on pages. If you are interested in global cards please create a ticket at with your inquiry. We can assist with the details for implementation or provide a quote for our Professional Services team to develop it for you.