Thrinacia General Developer’s Guide

Hi,

If you’re a developer and looking to make custom adjustments to your Thrinacia standalone Web UI, here’s a quick general guide on how to get started. Before making any changes, you should read through this blog post detailing how we handle sites with custom changes (except translation and custom CSS / JS which are excluded from the updates).

Please note that the Thrinacia standalone Web UI is built using AngularJS. If you’re unfamiliar with this web framework, you can refer to here for help.

The following guide will assume you have some experience in AngularJS development.

Front End Files

Index (angapp/index.html)

This file is where all the files are included. For all custom controllers, plugins, and style, you’ll want to place it here.

AppConfig (angapp/scripts/controllers/app-config.js)

This file is where you’ll find the routes. Routes will determine what View ( and Controller if specified ) are used depending on the URL or route.

route

You can also define additional custom pages, views, and controllers that you’ve made here.

If the controller isn’t specified, then the Controller will be specified in the view itself, in the ‘ng-controller‘ attribute.

EXAMPLE:
The Login page (/login) uses the views/login-register.html template and the controller used is the LoginCtrl.

inline-controller

VIEW (angapp/views/)

The views are template files and contains all the HTML. They are where the front-end view can be altered. They are styled using Semantic UI.

 

Partials (angapp/views/partials) – Partials are snippets of HTML that can be re-used on the main views. To include, you just need to have div wit

EXAMPLE:

Here is a snippet to include the footer partial. You will need to add the ng-include attribute:

<div ng-include src="views/partials/footer.html" ></div>

CONTROLLER (angapp/scripts/controllers)

controller_folder

The Controller is where all the logic should takes place, including all your data retrieval, processing, and saving. Thrinacia standalone Web UI uses Restangular as our RESTFUL API service. Once you’re done parsing the data, you can pass it to the view using the $scope.

To pass data from the controller to the view to see and use, you can pass using either ng-model (2-way Bind) or ng-bind (1-way Bind).

Services (angapp/scripts/services/) – Services in Angularjs are singletons, used to instantiate an object just like classes.

Directives (angapp/scripts/directives/) – Directives are markers on a DOM element which attach a special behavior to it, usually as an attribute but it can also be an element name or CSS class.

Custom CSS / JS (angapp/custom/)

custom_folder

If all your changes involve just JS and CSS changes, you can do so through the corresponding custom.css and custom.js in the custom folder. Remember, these files are excluded from the updates and won’t be overwritten.

Images

We have a CDN set up for all our images, ensuring fast and efficient delivery. Once an image is uploaded, you can specify the size based on the url parameters. You can read more about it here.

You can also place the images in the images (angapp/images) and reference them where you need them.

Translation

If you’re looking to translate the site into a different language or adding in your own personal text changes, you can refer to these 2 tutorials here for help:

Thrinacia Translation Using Angular Translate
How to find the correct JSON translation file for each page

Admin Settings

As an Admin, you have the option to change a lot of aspects about the site.

Here are two tutorials to introduce you to the Admin Dashboard a few of the options:

Portal Admin – Administration Dashboard Tutorial
Portal Admin – Portal Settings Tutorial

Testing

Once you have everything set up, you can start testing the system. Here is a tutorial on how to test the Post-processing payment system. If you’re using Direct Transaction, the payments are processed immediately:

Testing Pre-authorization and Capturing Funds as Portal Administrator

You can also use Webhooks to keep track of the responses from the server:

Webhooks
Example Webhooks

Hope this helps.