Setup the Frontend

Installation

You can get the latest code from the Sunbird RC UI Repository https://github.com/Sunbird-RC/sunbird-rc-ui

This is an Angular 8 project, and you need to install the dependencies, and run the project.

Steps to follow

1. Make sure your back-end services are up and running

2. Keycloak Configuration changes:

   • Once keycloak (http://localhost:8080/auth/) is up and running. Login to keycloak using the default username (admin) and password (admin). Navigate to Realm settings and update the FrontendURL attribute to - http://localhost:4200/auth

   • Then navigate to Clients -> registry-frontend and make sure to update these fields/ attibutes as mentioned below

     1. Valid Redirect URIs to http://localhost:4200/*

     2. Web Origins to http://localhost:4200

3. Clone the Sunbird RC UI Repository https://github.com/Sunbird-RC/sunbird-rc-ui

4. First step is to create a ui-config file in the directory sunbird-rc-ui/src/assets/config. We have provided a sample-ui-config in the same directory as a reference.

5. Sunbird-RC UI is a template that can be used to customise your UI application based on your use case. To do that you have to make changes in the UI-config and the angular application accordingly. You can refer Configuration section below to make the necessary changes based on your use case.

6. Commands to run :

yarn

npm start

7. If yarn is not available on you PC you can also use npm install.

8. Once the project is up and running - you can access it at http://localhost:4200.

Configuration

The application needs to be configured with the appropriate fields to be able to use it. Example configuration is provided in the src/examples folder.

Environment Config

Key	Value
baseUrl	Base URL for the Sunbird backend. Eg: https://registry.com/api
schemaUrl	URL to the OpenAPI schema definition. This could be a HTTP path or a path to a local file Eg: https://registry.com/api/schema.json OR /assets/schema.json
logo	URL to logo. This logo is displayed in the header of the UI

Forms

The forms.json needs to be placed in src/assets/config. This file defines the schema for various forms used, along with the fields for each. The form rendering is based on the formly.dev library, and the forms.json is a small wrapper on top of the formly schema.

In this file forms is an array with key/value pairs. They key is the code / slug of the form which is used to access the form. Eg: if the key for a form is employee-signup that form can be accessed via /forms/employee-signup. Each form definition will have the below fields -

Key	Value
form.api	This is the path to the API endpoints for the entity this form handles. Eg: /Employer
form.type	Forms can be of 2 types. It can either be a form to create a new entity Eg: Employer, or it could be a form to submit a "sub-field" eg: work experience of an employee. For the former use entity. For the latter use property:<property name> (eg: property:work_experience)
form.formclass	HTML Class applied to the form container
form.title	Title of form
form.redirectTo	Redirect URL on after form submit
form.fieldsets	List of fieldsets(multiple) for this form. At least one fieldset is needed

fieldsets

Key	Value
fieldsets.definition	Name of the OpenAPI "Definition" to use
fieldsets.fields	List of fields(multiple) to populate for this fieldset. If you wish to display all fields from the schema, you can skip defining each field, and use use "fields": ["*"]

Form grouping:

You can change the layout of form like add multiple columns in single row add panel using below configuration in form.json file.

Key	Value
fields.formclass	Apply the css classes on forms fieldset
wrappers": ["panel"]	Wrap the group of field

Here is example for,

```
{
  "teacher-setup": {
    "api": "/Teacher",
    "type": "entity",
    "fieldsets": [
      {
        "definition": "Teacher",
        "fields": [
          {
            "name": "contactDetails",
            "formclass": " row form-div",
            "class": "col-6"
          },
          {
            "name": "identityDetails",
            "wrappers": [
              "panel"
            ],
            "children": {
              "definition": "IdentityDetails",
              "title": true,
              "formclass": " row form-div line",
              "fields": [
                {
                  "name": "fullName",
                  "required": true,
                  "class": "col-6",
                }
              ]
            }
          }
```

fields

Key	Value
fields.name	Name of field (same as defined in definition of that schema)
fields.custom	boolean Name of custom field (not defined in defination of that schema)
fields.required	boolean
fields.class	Class of field
fields.disabled	boolean Disable the field (readonly)
fields.children	object Reference field of definition (same properties as fieldsets)
fields.validation

Layouts

The layouts.json is used to define how the public and private profile pages look like. For each entity in Sunbird backend, a layout file should be defined with the fields and the order in which they should display.

In this file layouts is an array with key/value pairs. They key is the code / slug of the layout page which is used to access the form. Eg: if the key for a layout is employee-profile that page can be accessed via /profile/employee-profile. Each layout definition will have the below fields -

Key	Value
layout.api	URL Path of API
layout.title	Title of form
layout.blocks	Cards/Blocks (multiple) to populate in layout.

blocks

Key	Value
blocks.definition	Definition of fields from JSON Schemas in schemaUrl
blocks.title	Title of Card/Block
blocks.add	boolean Enable Add Button
blocks.addform	<name of form from forms> Form opens on Add Button click
blocks.edit	boolean Enable Edit Button
blocks.editform	<name of form from forms> Form opens on Edit Button click
blocks.multiple	boolean Enable Multiple values
blocks.fields	Array/List of fields(multiple) to populate in fieldsets

fields

Key	Value
fields.includes	Array/list of Included Fields from response or [*] for all fields
fields.excludes	Array/list of Excluded Fields from response

FAQs

Proxy configuration

To avoid CORS issues you can use proxy configuration. Run npm start or ng serve --proxy-config proxy.conf.json. For additional configuration please check proxy.conf.json file.

Hosting the Frontend

The frontend may be hosted any of the below ways

• As a container. You may create an image with the angular build files.

• On a VM

• In blob storage (eg: S3, with a CDN in front)