Tutorial

At current stage ScaffoldThis is great to build admin application or enterprise application like CRM, Contact Manager, Expense Tracking, Project Management, Bug Tracking etc.

In this tutorial we will build a contact manager, which is a small part of CRM Tools(Customer Relationship Management Tool). Most of the cloud based CRM would charge you on number of contacts you can store in their system, in this example we would see how easy it is to create a contact manager usign ScaffoldThis application.

Creating an application

Log in to your account for ScaffoldThis and click on create application link on application listing page.

_images/step-1.png

Lets call our application intuitive Contact Manager :) Fill in the details and click submit.

The application name can have spaces in the name, however system would convert and use a snake case for most of its usage.

So the database generated for our Contact Manager would be called contact_manager and the context URL would also be http://localhost/contact_manager.

Once our application is created, go to List Domain Entity from left hand menu.

_images/step-2.png

The system has already created basic entities for the application like User, Role and Permission.

Note

Do not delete the User entity, it would lead to unpredicatable results as inbuilt features like SignUp, Login, Forgot Password may depend on the User entity.

If we click and open the User entity, we would see that the system has already generated basic attributes for our User entity.

_images/step-3.png

Creating an Entity

Go back to application screen by clicking back to application button below, on application screen click Create Domain Entity button to go to create entity screen.

_images/step-4.png

Lets create our first entity which would be obviously Contact.

Domain name should be without spaces, similar to variable names in coding. Typically try to use CamelCase names, for example if my domain entity is called User Profile the name of domain entity should be UserProfile and use User Profile as display name which can have spaces.

In our case we would use Contact as both name and display name, fill in the details and click submit.

The system should create some basic attributes for the entity. An entity should always have a PRIMARY_KEY type attribute which would be used for cross referencing entities.

Lets delete the ContactName attribute and create another attribute for First Name, Last Name and Email.

Creating an Attribute

_images/step-5.png

Choosing the type from the drop down would result in appropriate database column and UI form element.

You can use following table for reference in deciding types

Type Database Column UI Form Element
TEXT VARCHAR(255) text input
NUMBER NUMBER(20,10) text input
DATE DATETIME Calendar input
USERNAME VARCHAR(255) text input
PASSWORD VARCHAR(255) password input
DROPDOWN VARCHAR(255) dropdown
EMAIL_ADDRESS VARCHAR(255) email input

Summary View

If an attribute has use in summary view checkbox as checked then the attribute would show in the summary view presented like Tables, Cards etc.

Natural Key

If an attribute has use as natural key checkbox as checked then the attribute would be used as natural identifier like values in dropdown selection or autocomplete.

Search Key

If an attribute has use as search key checkbox as checked then the attribute would be available as one of the search fields in the application.

Note

Each entity should have atleast one Natural key, in absense of any natural key the system would show database generated identifier in dropdowns, which is usually not desirable.

Lets create an attribute for First Name, like entity name, even attribute name should not have spaces, so our name for attribute would be FirstName and display name would be First Name. The type would be TEXT.

Create attributes for Last Name and Email as well, the type for email would EMAIL.

We will use Email as Natural key and use all of the three in search and summary view.

If you use both first name and last name as natural key instead of email, then system would use comma seperate concateneted form as drop down value . eg. John, Doe

Generating Preview

Lets go back to application screen using back to application button and generate a preview to see how our application looks like.

_images/step-6.png

If you notice there is an option to Change UI Theme , this allows us to choose an appropriate look and feel for our application.

_images/step-7.png

You can choose any of the available themes, for this example we would choose Naughty Red.

Once you have selected a theme, click Generate Preview button right below the Change UI Theme button to generate the preview.

The preview should open in a new window or tab.

_images/step-8.png

Even tough the preview shows a login page, the authentication does not work in preview. So you can simply click login to proceed.

_images/step-9.png

This is a sample dashboard of the application, if you see we already have populated some of the data, so that you get an exact view of how your application would look like when its in use.

Feel free to look around in the preview, remember it is still a working application. So if you add a user or delete a user it would be persisted into the database.

Lets click on List Contact from left hand menu to see how our contact list looks like.

_images/step-10.png

If you remember, we had used first name, last name and email as search keys, hence we see three text boxes in the search form above the list. This ways you can exactly customise which fields should be used for searching and which fields should be used in summary.

Since we do not have any contact for now, lets go ahead and create a few. Click create Contact button to go to create page.

_images/step-11.png

We have all the fields which we have created in the application.

Generating Source

Lets go back to application screen to generate the source code.

_images/step-12.png

If you notice there is an option to Change Architecture , this allows us to choose an appropriate architecture for our application.

_images/step-13.png

See Getting Started supported-architecture section for all the supported architecture details.

Once you have selected the architecture, click download source button to download the generated code.

To deploy the generated code, please see Deployment