Oracle JET - Basic control with appController.js

When you start to develop your first application with Oracle JET the first thing you would like to understand is some of the basic ways on how to control parts of your application and influence some basic things provided by the template. The first place you can start looking is appController.js which is located at js/appController.js . The appController javascript is the simple control script which can be used to influence most part of the application.

What is provided in the base template (shown below) is a start for you to develop your own code. As you can see we have some hard values which are used in the examples. In a real world example it would not make any sense to have any (or most) of these in a hardcoded manner. You would rather fetch them from a REST API source.

If we look for example at line 19 in the above example;

self.appName = ko.observable("My Demo Application");

This is used as a variable which is referred to in html pages within the Oracle JET application. This specific example if for example used to show the name of the application, you can see this in the screenshot below. The same is the case for the email address which is controlled in the appController.js script self.userLogin

If you want to understand how to call and include the values from appController.js you can refer to the basic examples provided by Oracle JET. You will see that there are data bindings included in the HTML code like for example the below:

The data-bind="text: appName" part will ensure that the value for appName from appController.js is used in this case.

As stated, there is no real good use for this model in real world applications, or at least the number of cases is limited. In reality you will fetch most data from a REST API in most cases. However, when starting with Oracle JET is a good to play around a bit with it to ensure you understand the basics and how to apply them as it will help you a lot when you develop your own custom code and extensions for appController.js in a later stage.