Sunbird RC (Registry & Credential)
  • Learn
    • Introduction
    • Sunbird RC Overview
      • Why do we need Sunbird RC?
      • Core Capabilities
      • Core Registry Verbs
      • Workflows
      • What Sunbird RC is and what it's not? (WIP)
      • Possibilities
      • Demo Links
    • Technical Overview
      • High level architecture
      • Technical Specification Draft
      • Tech Stack and Requirements
    • Adopters
    • Roadmap
  • Use
    • Getting started
      • Pre-requisites
      • Installation Guide
        • Registry CLI
          • Setup A Registry Instance
        • Manual installation through docker-compose
        • Production setup through Helm
    • Developer's Guide
      • Configurations
        • Frontend Configurations
        • Frontend - Proxy configuration
        • Audit Configuration
        • Notifications Configuration
        • View Templates Configuration
      • Schema Setup
        • Introduction To Schemas
        • Creating Your Own Schemas
        • Schema Configuration
        • Create Schemas With Custom Password
      • Setup the Backend
      • Setup the Frontend
      • Backup and Restore
        • PostgreSQL
          • SQL Dump
          • File System Level Backup
          • Continuous Archiving and Point-in-Time Recovery (PITR)
        • Cassandra
          • Snapshot-based backup method
          • Incremental backup method
          • Data Restore
      • Generic Identity And Access Management
      • Metrics
      • Custom Keycloak Build
      • Custom QR Code design
      • VC Verification Module
    • Integrations
      • SSO with existing systems
      • Digilocker Meripehchaan SSO
      • Digilocker Integration
    • Release Notes
      • Latest Release - v1.0.0
    • Admin Portal
      • Login
      • Get Started
        • Create Schema
        • Attestation Workflows (WIP)
        • VC Template
          • Custom VC Template (WIP)
        • Ownership (WIP)
        • Publish (WIP)
      • Dashboard
  • API Reference
    • Registry
      • Using The APIs
      • Create An Entity
      • Invite An Entity
      • Generate token
      • Generate admin token
      • Get An Entity
      • Get An Entity By Id
      • Update An Entity
      • Create A Property Of An Entity
      • Update A Property Of An Entity
      • Revoke a Credential
      • Delete An Entity
    • Schema
      • Create Schema
      • Get Schema
      • Update Schema
      • Delete Schema
      • Publish A Schema
    • Attestation API
      • Raise An Attestation
      • Get Attestation Certificate
    • Claims API
      • Get All Claims
      • Get Claim by ID
      • Attest A Claim
    • Discovery API
      • Search An Entity
    • File Storage API
      • Upload A File
      • Get Uploaded File
      • Delete A File/ Multiple Files
    • Bulk Issuance API
      • Get Sample Template
      • Upload CSV
      • Get all uploaded Files
      • Download a Report File
    • Metrics APIs
      • Get Count
      • Get Aggregates
    • Other APIs
      • Sign API
      • Verify API
      • Swagger JSON API
      • Health API
  • Reference Solutions for Functional Registries
    • Education
      • Education Ecosystem
        • Installation
      • Education Registries
        • Installation
    • Health Registries
      • Organ Registries
        • Frontend Setup
        • Backend Setup
        • User Guide
      • Health Facility Registry
    • Govt to Person (G2P)
  • Reference Solution for Digital Credentials
    • Certificate Issuance
      • Installation(WIP)
      • User Guide
    • Vaccination Platform
    • Unified Learners Passport (ULP)
      • ULP Capabilities
      • Example Scenario
      • Technical Components (WIP)
      • Demo/Sandbox Links (WIP)
      • Installation Guide (WIP)
        • Frontend Setup
        • Installation through docker-compose
        • Dummy records setup for refrence
    • eLocker
      • High Level Diagram
      • Installation (WIP)
        • Frontend Setup E-locker
      • User Guide
    • Skills & Work Credentials
  • Links
    • Source Code
    • Releases & Changelogs
    • Website
    • Roadmap
    • Reference links
    • Design
  • Community
    • Discussion Forum
    • Contributors
    • Contributing
    • Contribution Guidebook
    • Code of Conduct
    • Community Events
    • Status By Track
  • HELP
    • Roadmap
    • FAQs
    • Glossary
    • Guide to Electronic Registries and Verifiable Credentials
      • Verifiable Credentials
        • What issues will Verifiable Credentials address?
        • What are the key roles in Verifiable Credentials?
        • What are the components of Verifiable Credentials?
        • What are the benefits of Verifiable Credentials?
        • Digital Credentials vs Verifiable Credentials
        • QR code vs Verifiable QR code
        • Use Cases
      • Electronic Registries
        • Evolution of Electronic Registries
        • What issues will Electronic Registries address?
        • Benefits of Electronic Registries
        • Registry vs Database
        • Design Principles
        • Use Cases
      • Leveraging Existing data stores
    • External Open Source Software Attributions
Powered by GitBook
On this page
  • Installation
  • Steps to follow
  • Configuration
  • FAQs
  • Proxy configuration
  • Hosting the Frontend

Was this helpful?

Edit on GitHub
  1. Use
  2. Developer's Guide

Setup the Frontend

PreviousSetup the BackendNextBackup and Restore

Last updated 10 months ago

Was this helpful?

Installation

You can get the latest code from the Sunbird RC UI Repository

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 () 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 -

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

      1. Valid Redirect URIs to

      2. Web Origins to

  3. Clone the Sunbird RC UI Repository

  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
  1. If yarn is not available on you PC you can also use npm install.

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

schemaUrl

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)

Once the project is up and running - you can access it at .

Base URL for the Sunbird backend. Eg:

URL to the OpenAPI schema definition. This could be a HTTP path or a path to a local file Eg: OR /assets/schema.json

https://github.com/Sunbird-RC/sunbird-rc-ui
http://localhost:8080/auth/
http://localhost:4200/auth
http://localhost:4200/*
http://localhost:4200
https://github.com/Sunbird-RC/sunbird-rc-ui
http://localhost:4200
https://registry.com/api
https://registry.com/api/schema.json