Documentation

Custom card development technologies

ThoughtFarmer 8.0 is a .NET 4.5.1 application. On the backend we use ASP.NET MVC and Web API to serve content to the application. The client side portion of ThoughtFarmer was written using ReactJS and is a single page application. This means that instead of reloading the page for any given click or interaction, the client side portion will call the Web API to get the updated information and React will update only those components that have changed. This results in a much faster web application with greatly enhanced user experience.


Development technologies

The same mix of technologies that ThoughtFarmer is built on is available when creating custom cards. To allow for dynamic compilation the method for development is slightly different than if you were to develop using an IDE on the desktop. The code for all of these options will go into their proper location in the edit card tool within ThoughtFarmer as shown below. For details please see "Create and edit a custom card".

Edit%20card.png


The following information will guide you through the technology options available.

C# Server side

When a page has a custom card on it, the server will look to see if it has any content in the Server (C#) area. If it does, it will use RazorEngine to dynamically compile the content. If there are errors then a message will be displayed instead. This same dynamic compilation process is triggered when you click Validate script while creating custom cards.

RazorEngine is based off of .NET's Razor parsing engine. However, there are many subtle differences that make development for it slightly different. In particular MVC helper classes like @Html and @Url are not available within RazorEngine templates. We have added our own subset of Html helper methods available in custom cards. ThoughtFarmer 8.0 currently uses RazorEngine 3.3.0.
See the RazorEngine development guide for examples.

JavaScript

ThoughtFarmer cards get sent their content as strings from the server. Once received ThoughtFarmer will run eval on the JavaScript string content. So keep in mind there is no specific file associated with the JavaScript for a custom card. If you need to debug the script use debugger statements within your code to trigger a breakpoint (this will only be triggered if the dev tools are actually open).

Getting information from the server is possible with ajax calls to our REST API or by using the JavaScript API available. 
See the JavaScript and jQuery development guide for examples.

ReactJS

ThoughtFarmer 8.0 utilizes ReactJS. This means you can also code custom cards using React components. JSX templates are a powerful new tool that allows you to build components quickly and intuitively. However, the content in the client side area of the custom card editor must be pure JavaScript. You will first need to compile any JSX templates into JavaScript or code completely using ReactDOM
See the ReactJS development guide for examples.