Ready to Learn?Ex Libris products all provide open APIs

Tech Blog

 

New Admit Progress Tool

Payton Pietron on October 5th, 2017

This project shows how you can create a progress tracking tool, specifically for newly admitted students. This tile would help new students complete all their tasks and be ready for day 1 of school. The project also shows how to setup routes and install third party packages with npm. Routes in the AEK allow you to have multiple pages within a tile. This project is currently a proof of concept that shows what can be done with the AEK. You are free to do what you like with this project and improve it as you see fit.

 

Explanation of tile:

The home screen of the tile opens to a list of categories (Complete FAFSA Tasks, Complete Housing Tasks, etc.) for tasks that a newly admitted student must complete before school starts. These categories show how many of the tasks the student has completed thus far. If they have completed all of the tasks for the category, a green checkmark appears. If one of these categories is clicked, the user is directed to a new page that has the detailed tasks for that specific category. If the user has completed the task, a green checkmark appears. If they have not completed the task, a red 'x' appears. If the user clicks the 'Graph View' button on the home screen, they are directed to a new page that shows a graphic view of how close they are to completing all their tasks.

 

Where are the data coming from?

For this example, the data are hard coded. An array of JSON objects has been defined within a function and is returned (see funcs.es6.js in the utils folder). The function is called on the pages where the data need to be displayed. This approach is useful if your tile will have static info. JSON could also be used in a similar way if you chose to get these data from an http request. One of the JSON objects is shown below. The 'name' is the main category, shown on the home screen. The values for 'count', 'complete', and 'oneTask' are also used on the home screen. The 'tasks' show the detailed tasks for that specific category. The 'tasks' data is displayed on a new page when you click on a main category. 

 

Screenshots: 

            
 
This blog will show you:
  • How to setup routes
  • How to install third party packages with npm
  • What each part of the directory does (files are commented to achieve this)
    • For further information, see the blog titled 'Basic AEK Project Directory Walkthrough'

 

To use this feature, please read the following instructions: 

Implementation Steps

1. Go to the folder you would want the project to exist in

2. Download the code from GitHub (https://github.com/ExLibrisGroup/campusm-aek/tree/master/dev-net-tracker

3. Once this project had been successfully installed then go into the project folder

4. Then use the following command: aek start

5. You will then need to use your login details

6. You will then need to choose your environment you would like to run against

Once these steps are done, you should see the project running on http://locahost: 5000. You will be able to look at this project locally and deploy. You can also copy this project and create your own version.

 

How to Setup Routes:

In your main.jsx file, require the router and RouterView components.  

var router = require("./utils/router");
var {RouterView} = require("@ombiel/aek-lib/react/components/router");

In your main.jsx file, require the components that you want to use as screens (a.k.a. pages). The HomePage shows the screen of categories of tasks that a user needs to complete. The SelectedTaskPage shows the detailed tasks for the selected category. The GraphPage shows the graphic representation of how close a student is to completing all of their tasks through a stacked bar chart.

var HomePage = require("./components/home");
var SelectedTaskPage = require("./components/list");
var GraphPage = require("./components/graph-page");

Within your render function in your main.jsx file, setup your routes by setting the path props of your components. Set the home screen path to “/”, this will be the first page that appears when the tile is opened.

<HomePage path="/" mainTitle={mainTitle} items={items} title="Completed Tasks"
button1="Task Tracker" button2="Graph View"/>
<SelectedTaskPage path="/task/:selected" mainTitle={mainTitle} items={items}/>
<GraphPage path="/credits" graphTitle="Percentages of Completed Tasks"
mainTitle={mainTitle} title="Completed Tasks" button1="Task Tracker" button2="Graph View"/>

Within a screen that you need to link out from (e.g. HomePage in the home.jsx file), require the router and define the Link component.

var router = require("../utils/router");
var Link = router.Link;

Within the render function of the screen that you want to link out from, set up the Link component. When you click the words in the span tag defined below, it will send you to your SelectedTaskPage component. It also passes information through the path. This is allowed because the path in main.jsx was set to “/task/:selected”.

 <Link href={"/task/" + item.name}>
    <span>
        {item.name}
    </span>
</Link>

You can access the information that was passed through the path from within the component that was linked to. For example, we used the above Link in HomePage to link to the SelectedTaskPage, so within list.jsx, where SelectedTaskPage is defined, I am able to use this.props.ctx.params.selected to see the information that was passed through the route.

 

Installing a third party package with npm:

The third party package used within this project is called Recharts, which is a graphing package. To install the package, run the following in the command line at the project’s root:

npm install recharts

To use a package, use require(“package/pathToLib”); in the relevant file. An example is shown in the chart.jsx file. Define the components you would like to use from the library. Use the components as defined in the package’s documentation.

var Recharts = require("recharts/lib");
            const {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer
} = Recharts;