SCHOOL MANAGEMENT: PART 1

In this tutorial, you will create a prototype of a Learning management system (LMS). You will work with Views, Permissions, Menus, and much more!

This advanced tutorial assumes that you’ve read at least one of the beginner tutorials and have a basic understanding of App Builder UI and concepts.

CREATE TEACHER DATA TYPE

Most often, you add a new web page to your project from the App Builder home page. Whenever you add it, an associated data type is created transparently in the background.

However, it is pretty legal to make the opposite - define data type first and edit it’s views later. Let’s start with this approach and create a new Teacher data type.

Go to the Data Types page using the Project menu on the left and click Add new button.

Name the new type Teacher since it will contain all the information about teachers of our system.

You are transferred to the Data Type Details page. Type consists of Fields (contain data), Code Blocks (contain code), Views (display data in different ways), Seed instances (type instances defined by a developer), and Properties (metadata such as type name, permissions, and so on).

Note that there are 4 auto-generated views. Auto-generated views are used to present type instances generically, unless the developer has defined an appropriate replacement.

Click onto the Teacher - Web page view to edit it and accept a default suggested name when asked about replacing the auto-generated view.

EDIT WEB PAGE VIEW

App Builder opens Web page editor. 

The editor arranges components and fields using a  bootstrap grid. The grid consists of rows and columns, which are placed within a groupbox or other enclosing container.

Groupbox is a container using one of the predefined styles. Row contains up to 12 columns and can be selected by clicking on the grey vertical line. A column can have more nested rows, which can be split into more columns and so on.

Now try to create the layout as below and add the next fields from  Components -> ADD NEW FIELD:

Photo: Image

Full Name: Text input

Position: Text input

CV: Any file

ADD A NEW FIELD BY DEFINITION

Most of the time, you add new fields by drag-and-drop of placeholders from the ADD NEW FIELD section.  Sometimes you may want to define a field starting from its type. Drag and drop Define -> Regular field.

Then select data type UserAccount. The type has a badge System next to it, meaning that it is a pre-defined type.

The Name will be automatically inserted (you can change it now or later). Click Create.

IMPROVE LAYOUT

We have just a few fields on the page. They will look too big and loosely placed if distributed over the whole page. Let’s put all of them into the left groupbox. Click on the right groupbox to open its Properties. In General, put a tick on Hidden to hide it.

Open the properties of the left groupbox. Select Show header and set Title to Teacher Info.

In the Appearance section select Show as Solid.

Save the web page and go to the Teacher type details page.

CREATE TEXT VIEW

In the Teacher data type, in the Views section, add a Text view by clicking onto Teacher - Text view. It allows you to represent a data type as a text (or ‘character string’).

If a Text View is not defined, the auto-generated text view uses the first found field of String type or displays value of identifier in the absence of such field. This may occasionally result in type instances displayed as ‘35454353451’ or similar.

The teacher can be easily recognized by the Full Name. Drag and drop the field into a Text View. Then save and close the view editor.

Save the Text view and go back to the Teacher data type.

CREATE TABLE VIEW

Table view defines how to show the collection of instances of a particular type in a table format.

Let’s create the Table view for the Teacher type by clicking onto auto-generated Teacher - Table view. You are brought into the table view editor where one can swap, resize, delete or add columns, as well as change their properties.

Some fields are automatically displayed as links, but sometimes we do not want users seeing them.  For example, a click on the UserAccount link won’t provide any information for app users.

Click on the UserAccount column. In its Properties, select Don’t show link view for Open action.

Save Table View and go to the Data Types section using the Project menu on the left.

Note: to keep this tutorial shorter, we won’t remind you anymore to save your pages/views.

BUILD STUDENT WEB PAGE

Add a new data type called Student and create a new Web page view Student.

Try to get the following result:

Photo: Image

Full name: Text input, required

Class: Select, required

Enrolled from: Date

Phone: Phone number

Email: Email

UserAccount: Lookup, required

Mark as done: Yes/No

Note: Required fields are marked with the red star near the name. You can make a field required in Properties -> Validation.

Class field will be used to select a class from a dropdown list. You can populate the list with options from the Builder or from the Application. Since the number of classes can be different in every school, we will use the second way.

ADD VIEWS

Create the following Text view for Student type.

Create the Table View as below, too.

Remove the link from the Class column.

You can also change the formatter in Properties.

CREATE LESSON WEB PAGE

At the moment, our application can maintain lists of teachers and students. And in the next few steps, we will extend our management system with Lesson, Homework, and Completed task types.

Create a Lesson data type and build the following form:

Class and Teacher: Lookup, required

Begins at: Date and time, required

Course name: Text

Meeting link: Link

Ends at: Date and time 

We don’t need the link to the Class type because its view does not display any useful information (Class type has a single field Name which is visible in the drop-down anyway).

Note: You will have to create a Class field a few more times in other data types, but to keep this tutorial shorter we won’t remind you to remove the link.

ADD ON FIELD CHANGED

Let's calculate the lesson’s end time whenever a user enters  the start time. To do this, we add On field changed action .

Click on Begins at field in the working area and then and in the ACTIONS  section click onto On field changed. Please note that there are two action with similar names: On field changed (marked with blue icon; client-side (runs in browser as JavaScript) and On field change (marked with red icon; server-side (runs in server as Java).

You are transferred to the Block editor.

Build the code block as shown on the image below.

The action will be triggered when someone enters the date for the Begins at field. And then item.Ends at will be automatically equal to the item.Begins at plus the default lesson duration, that is, 45 min.

To set or get the value of a variable, drag it across green/gray lines to get setter/getter, respectively.  

If you have difficulty attaching Plus with minutes block, attach item.Begins at field to it first and then attach Plus with minutes block to the item.Ends at.

BUILD LESSON VIEWS

For the Lesson type we need the following views:

Lesson - text Text view.

Lesson - short text Text view. Note, that type can have multiple text views (or any other kind of view).

Lesson - table Table view.

CREATE HOMEWORK WEB PAGE

Create a Homework data type and build the following Homework Web view.

Lesson: Lookup->Lesson, required

Task Name: Text input, required

Task description: multiline text

Image: Image

Additional file: Any file

And default Homework Table view.

Add one more  Table view named for lesson - table as shown below.

Create Homework - text Text view.

We used Static text - dash line as a separator between elements.  

CREATE TASK WEB PAGE

Create a Completed task data type.

Create a Web page view named Student Task.

Here, students can submit their solutions, and teachers will check them.

Task and solution contains:

Lesson: Lookup->Lesson, required

Task:  Lookup->Homework, required.

File with solutions: Any file

Text Answer: Multiline text

Teacher feedback contains:

Student: Lookup->Student, required

Score: Integer 

Teacher comment: Multiline text

Note: Score represents a 12-grade evaluation system (you can set the range from 0 to 12 in its Properties, VALIDATION).

Date submitted: Date and time, hidden groupbox on the right.

Later we implement permissions so that only students/teachers will be able to edit particular fields.

Also, create Completed task -  table for lesson Table view as below.

ADD ON SAVE ACTION

Let’s fill the Date submitted field when we save our page.

Add On save action from the Type events panel.

If our task is Marked as done and the Date submitted is empty, we assign the current time (Local date time - now function) using the default timezone.

Therefore the item.Date submitted can be assigned only once, and no cheating with deadlines will be possible.

ADD TABS

Go to Lesson Web view, split the groupbox, and from Components -> LAYOUT add two Tabs to the right.

Name them Homework and Submitted solutions, respectively.

Take tabs out of the right groupbox. Delete the groupbox.

ADD COLLECTION FIELDS

Now it’s time to add the collection fields of Homework and Completed Task types.

Make sure that the Homework tab is selected in the working area.

Drag ADD NEW FIELDS ->Lookup table onto it,  select Homework Data type and put a tick near the Is transient checkbox.

Transient fields aren't stored in a database. They are usually used to present calculated or temporary data.

Get rid of the outer groupbox.

Then select a view we have created before (for lesson - table) and remove the tick near Can add.

Select Submitted solutions tab in the working area and Add the Completed Task transient collection as we did with Homework.

ADD BUTTON WITH ACTION

In the previous step, we removed the auto-generated Add buttons from the tables because they would be visible for both students and teachers and we do not have the ability to control them in a more precise way. Let’s

add a button Add new homework instead which we can hide/show as needed.

Select the button in the working area and add Before server action (client code) to it. Name the action Go to homework.

In the Code Blocks write the function that creates a new Homework instance and opens it in a new cj tab.

Add a similar button Submit homework to the Homework web page. Make the button green by setting APPEARANCE->Style to Success. Add client action named Go to student task.

The only difference is that the action creates an instance of the Completed task.

FILL TABLES ON LOAD

On the Lesson page we should fill the transient collections Homework and Completed tasks with relevant data.

We can do it during On load server action. On load is called on the server before the rendering web page elements.

To create a one, you can use the Type events panel on the right (click on the More button to open it).

Select On load.

Set item.@Homework collection to contain all the Homeworks where homework.Lesson is equal to the current one (item).

Set item.@Completed task to contain Completed task records.

Note: collections in Code Blocks are marked with @ before the variable name.

The stream block requests the instances of a given type and where block filters records. You can perform Queries only inside server actions.

CHANGE MENU

Go to the Menu editor using the Project Menu. Open the menu marked with red color (the default one). In the menu editor you can add new menu options and change their properties.

Change the look of menu choices by setting the icons as shown on the image below.

We’ve used the next icons:

Teacher: fa-user-md

Student: fa-group

Lesson: fa-flag-checkered

Homework: fa-book
Completed task: fa-bookmark

PUBLISH APPLICATION

Click on the Publish button on the top left corner to build and then deploy the app to be accessible for everyone!

What happens during the publishing process? There are a few steps involved:

- Build - the code and metadata are incrementally compiled into an executable web application.

- Deploy - app container is stopped and restarted with a new version of executable. This process is called deployment. When the application starts it synchronizes the app database structure with changes made by the developer.

If the application is running in a development container (default development mode), changes to web pages and client-side code are automatically pushed to the application and do not require explicit Publishing. If changes are made to server-side code or type structure - the project has to be published again to affect the running app. This state is indicated by the Publish button changing color from dark-gray to orange.

TEST YOUR APP

After you have played with the published application, you may have noticed that students can submit homework for others, can edit lessons and tasks anytime they want, and that teachers can change students’ submissions. The app is accessible for anonymous users, so anyone on the internet can make changes.

Let’s fix these problems by using Permissions.

From the Permissions section in the Project menu select and open Default permission.

First of all, let’s create Student and Teacher user roles. Click on the plus near the USER ROLES and just type the name you need. Don’t forget to click on the tick to save the role.

These roles are available for all the permissions you have, not just for the currently opened permission. You can also use them in the Code Blocks or Menu.

You can assign a role to any in-app user from the Admin tools in the Application. If you create a few app-only users and publish your app again, you will be able to assign user roles to them.

To add an app-only user you have to create a user account in Dashboard and give it access to the application.

CREATING A PERMISSION

From the Permissions section create new permission called School - teachers edit, students view.

Select as a default In any of roles -> Admin, Student, and Teacher roles. And for the Write select Admin and Teacher.

Users with the Student role will be able to do all the actions, except writing (editing).

Do not forget to save the permission.

SELECT PERMISSION

To select the permission, go to the data type you need, and in the TYPE PROPERTIES (edit mode!) choose the permission you need.

Select the School - teachers edit, students view permission for the Homework, Teacher, Student, Class, and Lesson data types.

Now, only Teacher or Admin users will be able to edit those types in the Application.

CUSTOM PERMISSIONS

Create new permission For homework that will be used in the Completed task type.

You can set individual permissions for all kinds of actions.

Click on the Show unset button on the top left corner.

In the expanded menu for the Write, Create select In any of roles Student.

Only students can create homework submissions.

Also, it is useful to create Custom permissions.

Create a one as the Default permission.

CODE THE DEFAULT PERMISSION

Check permission block returns a boolean value, true or false, indicating that the user can or can not access the item.

Users will have access to the Completed task type If:

The item is not created.

The user is a teacher.

He/she is the student who has created the submission.

Fetch a Teacher role instance.

Rename it to the teacher.

If an item is not defined, return true.

Since the item is a Dynamic field, we need to create a new type of Completed task to get the item’s data.

To check whether the user has a role, use the has role function from the UserAccount type. Notice that we pass user.user because it is the correct type.

Finally, give the access if the user is a teacher or he/she is the author of the item. We compare the UserAccount of a Student from the current Completed task with the user.user.

For the other cases, return false.

CODE THE WRITE PERMISSION

Create a new custom block for Write actions For homework permission.

The permission for writing will be almost the same. Here is a trick for copy-pasting. You can wrap your code into IF and copy the selected puzzle.

The only difference between default and write permissions is that the student can edit the task until he/she has marked it as done (until the assignment is NOT submitted).

MINI CELEBRATIONS

You now shine brighter with the ability to build web pages, different views, sophisticated permissions. Congratulations on completing the first part of the tutorial.

In the next part, we will improve our School LMS Application; you will learn about actions and functions in Codejig App Builder, security issues, and field manipulations.

Take your time, test the application you have, try to find all the bottlenecks, and then with new strength to the new threshold, to the other part!