SCHOOL MANAGEMENT: PART 2

This is the second part of the advanced School LMS CodeJig tutorial.

We have finished the first part by creating permissions. Permissions regulate whether a user can view / edit / change the whole page (data type).

However, permissions cannot be used for granting or restricting access to a particular field or action. For example, we would not be able to show a particular button for a teacher but hide it for a student just by using a permission mechanism.

In the next steps, we will improve our application and implement fine-grained application logic.

Note: the completion of the first part of the tutorial is essential to proceed with the further steps.

IMPROVE LESSON

On the Lesson page, hide the Add new homework button and assign an ID add_new_homework to it. With the help of ID, you can refer to an element in Code Blocks.

Also, we need some additional fields that will help us communicate between server and client actions.

Add switch is teacher ( hidden ) and Regular field New homework of type Homework. After creating a regular field, you can delete it from the working area. When the field is deleted from the working area it means simply that it is not shown on this particular view.  Not shown fields are listed in Existing Fields.

LESSON - ON LOAD ACTIONS

Let’s improve Lesson - load action. The teachers should be able to see only completed tasks and the students' submissions.

Note that we also assign a Boolean value to the item.is teacher to mark the user role and to use the item.is teacher later in client actions.

In the Lesson - loaded action, if item.is teacher is true (the user is a teacher), attach a button with the ID add_new_homework to the block set show element.

CUSTOM ACTIONS

You should remember, as we redirect to a new Homework, the Lesson field is empty, and we are forced to fill it manually.

Let’s improve it. First, add a new custom server action called Create homework. You can use server custom actions inside the client code.

Add a parameter Lesson item.

In the action body, create a variable new hw and assign the item to a new hw.Lesson.

If item.identifier is null (item is not stored in DB), we create an object. Create block stores a new item instance in a database.

Save the new hw variable and assign it to the item.New homework so that we can use it in the client action later.

We need the if section above because there can be a situation when the item is not yet stored in the database during the Create homework action call. For example, the teacher has created an item (but hasn't saved it) and then tries to make a new Homework.

In the Go to homework action, import Create homework block. Now we are opening the item.New homework (using the get link - update !).

IMPROVE HOMEWORK

We have done with the Lesson functions. Now let’s go to the Homework. The same problem here: if we create a Completed task, the fields remain empty.

The better way to fill data automatically is to use fill functions. In the Homework directory, create a new fill function and name it create submission.

We have to specify the Source (where we get data from) and the Result (where we insert data) types.

Select Completed task as a Result for the fill function.

target.Task: source

target.Lesson: source.Lesson

target.Student: select a Student by UserAccount from a unique collection of all Students.

But fill functions have special effects. First, you can’t call such a function from an unsaved object.

Second, it slightly changes the UI.

To hide the plus, click on the row of the Properties panel. Put a tick on the Hide fill functions.

HOMEWORK WEB VIEW

In the Homework Web view, create a switch is student and New completed task Attached field of type Completed task.

Also, add a button View your submission. Hide the buttons. Only one of them will be shown under the specific conditions.

Create Go to submission client action.

Assign the IDs for the buttons.

Submit homework: submit_button

View your submission: view_solution_button.

HOMEWORK - CODE BLOCKS

In the load, assign the correct Boolean value to the item.is student.

Also, we need the helper Get student by homework custom server action.

First, we select the instance of Student with the same UserAccount as the current user has.

Then we iterate over all tasks and select the one with the current student and homework. We used a for loop (one iteration) to make sure that only one submission is selected.

You remember that we can call server custom actions from the client code.

In the loaded action, if the student views the page, we try to get the Completed task with the Get student by homework action. If such a submission exists, we show the View your solution button.

Otherwise, we show the Submit homework button so the student can create a new submission.

CALL FILL FUNCTION

Now in the Go to submission redirect to the item.Completed task since it must be defined by that time. Specify the fill function ID to fill in data on the Completed task page automatically.

You can get the fill function ID from the type directory.

IMPROVE COMPLETED TASK

In the Completed task Web view, add a new switch field is teacher. Disable all the visible fields except Mark as done. Hide the Mark as done and Teacher feedback groupbox.

Assign ID feedback for the Teacher feedback groupbox.

COMPLETED TASK - CODE

In the Completed task - load set the item.is teacher Boolean value.

In the loaded action:

If the item is marked as done (it is submitted), then show the feedback section. There is no use for it before the task is submitted.

If the user is a teacher, enable the Score and Comment fields so that he/she can grade the homework.

And disable the fields where the student might have submitted the homework so the teacher can not change the student’s submission files.

If the user is not a teacher, then the fields will remain as they are by default, except the Mark as done field. It won’t be visible to teachers.

Finally, the validation block. It is called before the item data is saved on the server. Imagine the situation where a student has managed to change the properties of a field.

Here is an example of how you can additionally validate the data a user submits. Error alert throws an exception. If it is reached, the data will not be saved on the server.

UPDATE THE MENU

Go to the Menu section from the Project menu and create an additional folder called Manage. Set the Permissions IN_ANY_OF_ROLES -> Teacher and Admin.

Drag all the fields (except Lesson) to the Manage folder. That is the information that a limited number of people can view or edit.

Set the permission for All lessons to AUTHORIZED.

THE PROBLEMS WE HAVE

You may have noticed that it is hard for a student to log in. Our application’s root page is a Teacher page (loaded in the create mode).

We can solve the problem by creating a default home page visible for everyone.

It is hard to operate without a dashboard, too.

So, our final primary task is to create separate dashboards for students and teachers and a school home page.

DASHBOARD FOR STUDENTS

It will be useful for a student to have all recent home tasks, upcoming Lessons, and all the submissions on a Dashboard.

Create a new directory Submission overview. Add a Web page view.

As a header, we used a new static field with the text My homework. Also, we hid the page toolbar.

We added three tabs: Homework, Submissions, and Curriculum.

The Homework tab has a Homework transient collection with the following table view:

Submissions has the Completed task inside:

And Curriculum has Lesson transient collection:

Note: there is no need for Add new and delete options for all these collections.

STUDENT DASHBOARD - ON LOAD

The load action is quite significant, and we will try to explain it part by part.

Let’s start by filling in the item.@Completed task collection. You already know how to get the current Student from previous parts. Here we select the Completed tasks where the Student is the same as the current student.

To get the homework we haven’t yet solved, it is better to start from the opposite: return all of them except the completed ones.

We can iterate over an already defined item.@Completed task instead of making a query again. Since it is not possible to directly compare objects in a query, we keep track of identifiers (Integer). Before we add an item to a collection of completed homeworks, we check whether the Task is not null to avoid possible errors. And the counter variable helps us to keep track of the completed homeworks length.

If there is at least one completed homework, we filter the Homework query, excluding Homework items using identifiers.

Otherwise, fill the item.@Homework with all the homeworks (where the class is appropriate for the current student and the Lesson is defined).

Finally, we fill the Lesson collection with all the Lessons starting from the previous month and intended for the current student’s class.

Note: we do not have a minus time block because you can always add a negative number to get the time in the past.

DASHBOARD FOR TEACHERS

Create Homework overview Web page. Here a teacher will be able to view the lessons and the students’ solutions.

Create the tab My Lessons. Add Lesson transient collection. Only the Lessons of the current teacher should be visible here.

In the Submissions tab, add the Completed task transient collection.

However it is possible to filter the table on the page using built-in filters, we can also add handy buttons.

Add three buttons Not checked, Checked, and View all into the column. To align elements horizontally, select a column (but not a row!), and in its APPEARANCE, CSS write a rule display: flex;

TEACHER DASHBOARD - CODE

Create the View works custom server action. We will call it to get the unchecked or checked submissions of the students.

View works should have two parameters: item (our Homework overview) and view checked boolean value. If we need to get checked works, we filter the Completed task by Score and Teacher. To get unchecked works, we have the additional filter with work.Mark as done so the teacher will not be able to view unfinished assignments.

Create separate server actions for the buttons on the Homework overview page:

View unchecked works. We call the View works with the item and false parameters.

View checked works. Here we pass a parameter: true.

View all works. Here we stream all the Completed tasks filtering only by a teacher account.

TEACHER DASHBOARD - ON LOAD

Select the corresponding server actions for every button.

Finally, create a load action. By default, item.@Completed task will contain only unchecked works.

And the item.@Lesson will contain the lessons with the appropriate teacher.

SCHOOL HOME PAGE

Here is an example of a school home page in terms of the tutorial.

We have a School home page with some information and two buttons: Login as teacher and Login as student.

Both of them have their redirect function that leads to the corresponding Dashboard page.

Here is the code for the Login as teacher button to open a Homework overview.

And for the Login as student to open the Submission overview.

CHANGE APP MENU

In the Menu, add Create new tabs for the School home page, Homework overview, and Submission overview.

Rename the Homework and Submissions overviews into Dashboard.

In the Properties, IN_ANY_OF_ROLES permission set the Teacher role for the Homework overview dashboard and the Student for the Submission overview.

For the School home page select ANONYMOUS permission so that authorized users won’t see it.

IMPROVE SECURITY

Imagine the situation where students somehow got a link to the Teacher dashboard. Since there is no protection, they can mess up there quickly.

Create permission school - teachers only. Set the Default role Teacher. Even the app admins won’t be able to view the page with this permission.

You can do the same with the Student dashboard.

In the Completed task, a student can open any submission from the Index page (the main page of the data type where all the instances are shown).

In the For homework permission allow the index page viewing only for Teachers and Admins.

Don’t forget to set the permissions in the Data type directory.

SET HOME PAGE

Go to the Web Pages section. On the top right corner, click the Set home page button.  

Select the View School home page and Create new action.

CONGRATULATIONS!

You’ve completed the advanced School Learning Management System tutorial.

We covered all the important steps to master the Codejig App Builder:

  -    Data types and their views

  -    Actions and functions

  -    Permissions

  -    Menus

  -    Field manipulations

Now you should be able to create applications of your own easily.