mydigitalstructure

Commonly the internet gets projected as a highly-technical environment, and it is true that it takes a lot of technology to make it work, but the real value of the internet is in its ability to organise and share information using a common language (set of protocols).

A key element of running any successful organisation is to be organised and one of the simplest ways to do that is by using an app built using the internet, an internet-webapp.

This quick start guide will step you through what it takes to build a internet-webapp using mydigitalstructure.

mydigitalstructure covers all the backend stuff so you can focus on the user experience (interface).

You don't need any traditional computer science/engineering or information technology experience!


Let's get started

We are going to jump right in by looking at the two basic elements of any webapp, form & function, and do some quick introductory tutorials to give you a sense of them.

1 HOW IT LOOKS

The form controls how the webapp looks and is a key element of the user experience. The form is created using HTML & CSS.

Do the HTML tutorial
Do the CSS tutorial

2 WHAT IT DOES

The function controls how the webapp behaves; ie what happens when a user clicks a button. The function is constucted using Javascript based code. All modern web-browsers work with Javascript code.

Do the Javascript tutorial

You don't need to have mastered HTML, CSS or Javascript to continue with this quick start guide; just as long as you have a sense of their place in building a webapp, you can keep returning to the tutorials when needed.


Now let's get the tools we'll need

Now that you have a basic understanding of building blocks of form & function and the key concepts of HTML, CSS & Javascript let's build a webapp using the mydigitalstructure internet service.

We are using the mydigitalstructure SDK/js (a set of functions that make it easier to work with the mydigitalstructure service) so we can focus on the user interface of the webapp.

3 GET THE TOOLS

Install sublime text editor
(or use your preferred text editor)

Install Chrome

4 CREATE YOUR SPACE

Go to console.mydigitalstructure.com and click SIGN UP and follow the instructions.

You have now created your own space on mydigitalstructure!

Using the link in the email you would have received; log on to the console.


Let's take a look under the covers

Using Chrome, go to console.mydigitalstructure.com (if not already there) and in the Quick Start section click Create Quick Start webapp - this will create an example webapp.

5 OPEN THE EXAMPLE WEBAPP & CHROME DEVELOPER TOOLS

Once the example webapp has been created, in the Quick Start section click on the unique URL for your webapp.

Once open, log on using the same username & password that you used for the console; then in the Chrome address bar; click the three-vertical-dots icon (top, right hand side) > More tools... > Developer Tools you will then see a new window like the one below;

Chrome Developer Tools

Relating back to what you have learnt in steps 1 to 4, there are two key tabs as highlighted in the diagram; Elements which shows the underlying HTML elements (with CSS classes) creating the form, and Sources which shows the JavaScript code that manages the function of the webapp.


Now to make a change to the webapp

Assuming you have just completed step 5, let's get a source file and edit it.

We will make a simple change to a JavaScript file to add the ability to view a contact's mobile (cell) number in the contacts list.

Let's first look at what exists in the sample webapp by clicking Contacts in the left hand menu. You will now see a list (table) with one row; your first name and surname.

We are now going to add mobile (cell) number to this list.

6 GET THE FILE

In the Chrome Developer Tools window click Sources and then right click on 1901.app.contact-1.0.0.js (if you can't see the file, navigate to sites/1901) and select Save As.. and save the file on your computer, replacing the 1901 with your unique site number.

The site number is the number after "site" in the URL of your webapp.

7 EDIT THE FILE

Open Sublime text editor (or you preferred text editor) and open the file 1901.app.contact-1.0.0.js. Now that you have the file open in the text editor, search for "Surname" and insert the code snippet below after the similar code for "Surname".

{ caption: 'Mobile number', param: 'mobile', sortBy: true },

Now save the text file and return to console.mydigitalstructure.com.


Update the webapp with the change

On the console home page in the Quick Start section click Edit the Quick Start webapp.

8 UPLOAD THE FILE

In the menu, under the site name and with three horizontal bars, select Files.

Select the file you just edited and click Upload.

9 UPDATE THE WEBAPP

In the menu, under the site name and with three horizontal bars, select Pages.

Click on layout and in the text box scroll to the bottom until you can see;

<script src="/site/1901/1901.app.contact-1.0.0.js">

Then edit this line to replace 1901 with your unique site number and click Save.

Now go back to your webapp and using Chrome click the reload icon in the address bar.

Chrome Reload

You should now see your change!


Congratulations!

You can now make a change to a mydigitalstructure based webapp!!


What's next?

You've just made a simple user interface change to the Quick Start webapp to get you started - with the breadth & depth of mydigitalstructure you can do a lot more. You can build any type of organisational webapp for any size of organisation; like managing your own single person enterprise, a globally diverse enterprise, a specialist service offering ... you can do it all on mydigitalstructure.

Next we will build on the start you have made - allowing you to do more.

Let's look at the changes you made in step 7 ("Edit the file") in more detail.

NOTE

In all the examples based on the Quick Start webapp we use the mydigitalstructure SDK heavily, including some functions to generate lists (tables), but as mydigitalstructure is an open service (platform) you can use any Javascript framework to achieve the same outcome. The Quick Start webapp also uses the bootstrap user interface framework (library), but you can use your preferred framework. For ease of documentation we will also use the Chrome web-browser, but of course you can use any modern web-browser.

GETTING DATA

The code change you made in step 7, was essentially modifying the configuration options for the mydigitalstructure SDK "util-view-table" function, which will start to call controller, to generate the list (table).

The "util-view-table" controller takes the configration options (Javascript object) and uses it to;
1) retrieve the data from the mydigitalstucture service
2) display the data to the user as a list (table).

To see the controller retrieving the data from the mydigitalstructure service; go the the Quick Start webapp and make sure the Chrome Developer tools are open (see step 5) and click on the Network tab and click on XHR.

Chrome Developer Tools Network

Then click on Contacts, and we will then see a network call on the networks tab. Click on the network call and scroll to the bottom of the Headers tab and look for Form Data, there you will see the data sent to the mydigitalstructure and then click on Response to see the data retured by mydigitalstructure.

The data returned is then used by the "util-view-table" controller, along with the configuration options, to display the list (table) to the user. Tip; All returned data is stored in the app.data object within the Chrome browser - to see the data; using Development Tools click Console and then type app.data and press Enter)


SETTING (SAVING) DATA

Make sure the Chrome Developer Tools are open and the Network tab is open and XHR clicked.

Using your Quick Start webapp, log on, click Contacts and click Add.

Enter a first name and surname and click Save.

Click on the network call that has CONTACT_PERSON_MANAGE and on Headers tab scroll down to Form Data, you can then see the data that was sent to the mydigitalstructure service.


READY TO MAKE ANOTHER CHANGE?

Let's update the webapp to add the editing of a contact's mobile number; as we added to the contacts list (table) in step 7.

mydigitalstructure comes with a set of common objects used by any organisation, in this case we are using the Contact Person object, it has a standard mobile parameter that we can use - back in step 7 that was the param value in;

{ caption: 'Mobile number', param: 'mobile', sortBy: true }

10 UPDATE USER INTERFACE

The first step is edit the app page to add a Mobile input box under the Surname input box.

Go to console.mydigitalstructure.com, click Edit Quick Start webapp and click on Pages, click on app.

In the large text box look for the HTML block that has a label of Surname;

<div class="form-group"><br /> <h4><label class="text-muted text-center m-b-0 m-t-sm" for="contact-edit-surname-{{id}}">Surname</label></h4><br /> <input type="text" class="form-control input-lg myds-text text-center" id="contact-edit-surname-{{id}}" value="{{surname}}" data-value="{{surname}}" data-id="{{id}}" data-scope="contact-edit-{{id}}" data-context="surname"><br /> </div>

and after it add;

<div class="form-group"><br /> <h4><label class="text-muted text-center m-b-0 m-t-sm" for="contact-edit-mobile-{{id}}">Mobile number</label></h4><br /> <input type="text" class="form-control input-lg myds-text text-center" id="contact-edit-mobile-{{id}}" value="{{mobile}}" data-value="{{mobile}}" data-id="{{id}}" data-scope="contact-edit-{{id}}" data-context="mobile"><br /> </div>

Click Save

Go back to your webapp and click the Chrome reload icon. Now click Contacts and click on Edit for the first contact, you should now see the Mobile Number input box.

The mydigitalstructure SDK will automatically set the data in this input box using the {{mobile}} tag and when you click Save automatically send the data to mydigitalstructure using the data-context="mobile" attribute, if it has changed.


CONGRATS AGAIN!

You've now worked through the key concepts of a mydigitalstructure based webapp!!