entityOS

Quick Start; Function

The function controls how the webapp behaves; ie what happens when a user clicks a button.

The webapp function is constucted using Javascript code.

This quick start guide will provide you with the Javascript basics that you need when creating a webapp.

Javascript

Javascript (js) is the programming language for the web, every commonly used web-browser comes with Javascript built in and ready to use.

Just in case you're wondering, there is no relationship between JavaScript and Java.

Some common uses for Javascript in a webapp include;

Use Description
Managing user interactions This is where you create code that "listens" to user actions and then responds by invoking your code - when a user clicks a button, or inputs some text. We use jQuery to help with this, more on jQuery later in this guide.
Managing data Organisational webapps are all about managing data and saving it on the cloud, in this case entityOS.cloud. Javascript is used to manage the sending and receiving data from a webservice.
The look Javascript code is used to dynamically updating elements based on user interactions or data. ie if status = Completed set backgroup-color to green, or if a user clicks on tab show that tab page.

Example

Key concepts / best practice;

Item Description
Store JavaScript in code files Separate your code (function) from the HTML (form), by placing it in files ending with .js
Using functions
Create functions to better organise your code and also make it easier to reuse the same code.
Example function declaration;

myApp.addOne = function (numberToAddTo)
{
  return numberToAddTo + 1;
}
Example function execution;

var newNumber = myApp.addOne(123);
console.log(newNumber);


124
Be expressive Create variables that express what they represent - ie var totalCount; not var a;
Debugging Use the console! Webbrowers have a built-in developer console that anyone can access and use to inspect the form (HTML/CSS) and function (Javascript). More about this in the Quick Start guide.

When building a webapp you will find you use some common techniques repeatedly, such as;

Item Description
Using jQuery Selectors jQuery is a set of functions that makes it easier to dynamically manipulate a webpages elements, by first selecting the element or elements and then using jQuery functions to change or add elements. You can use either jQuery or $ as shorthand.
Common selectors when developing a webapp;
Selector Description
$('#myElement') # is used to select an element based on the id of the element - eg
. id's should be unique so this should only select one element.
$('.myClass') . is used to select an element based on the class of the element - eg
. Many elements can have the same class so it could return an array of elements.

More about jQuery & selectors...

Use objects to store data Objects are used to store data that represent objects in the real-world - ie in an organisational webapp this can be a customer's contact details ie business name, phone number, webaddress etc.
Example object using entityOS notation;
var myObject = {
  tradename: 'ABC Pty Ltd',
  phonenumber: '02 2000 1234',
  webaddress: 'http://abcpl.com'
}
Example of accessing an object;
myObject.tradingname;

Try it

Use objects to store code Store your code, acting as what is called a "namespace" in an object. This allows you to better organise and reference your code in a meaning full way.
Example of using an object to hold code;
var myApp = {
  initialise: function () { [your code] },
  contact: {
    search: function () { [your code] },
    save: function () { [your code] }
  }
}
Example of executing code held in object;
myApp.contact.search('abc');
Working with data; using "variables" Data that is inputted by the user or retrieved from entityOS.cloud typically needs to be held within the browser for later use. To do that we use an object (as per above).
Example of setting data;
myObject.tradename = 'ABC Pty Ltd';
Example of getting data;
$('#tradename').html(myObject.tradename);
Common techniques
A common task of code is to loop through data a compare it to other data or user inputted values. In the following examples we use the lodash framework (more on it in the next section).
var businessContacts = entityOS.search(
{
  object: 'contact_business'
});

_.each(businessContacts, function(businessContact)
{
  if (businessContact.status == 'Active') { businessContact.include = true }
});
The rules of Javascript
Javascript as a language has a number of rules that must be followed - similar to the rules of the English language.
  • You need to break up code statement with a ";". A new line will also do the same thing.
  • Use the = to assign a value ie var height = 100;
  • Use the == to check a value ie if (height == 100) { [your code] };
  • Use the ! for not checking - ie to check a value is not a value if (height != 100) { [your code] };

Making it easier to work with Javascript

Similar to how there are frameworks (like bootstrap) to make it easier to work with CSS, there are similar frameworks that add to the functionality of Javascript - like jQuery, lodash & bootstrap (again). All these frameworks provide additional functions that you will commonly use when creating a webapp.

In addition to these general Javascript frameworks, there is a framework that makes it easier to work with entityOS.cloud - more on that later!

Some common frameworks used in webapps include;

Use Description
jQuery Functions that make it easier to work the HTML elements on the webpage ie selecting them and then making changes ie - setting their color based on data.
lodash A set of functions that add to the Javascript language ie - _.each().
bootstrap Functions that work with the bootstrap CSS classes
moment Functions for working with dates
numeral Functions for working with numbers.
entityOS Functions for working with the entityOS.cloud service.

Congratulations!

You have now completed the quick tutorials on form & function and how they are constructed for an organisational webapp.

There's more to learn, but we'll tackle that as we work through building an example app in the quick start guide.

Now let's go back to the quick start guide and look at the tools you will need to create an organisational webapp

Quick Start guide on "form"

Function automation using Node.js