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.
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.
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)
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/)
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:
Hope this helps.