# Setup the Frontend ### 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 [http://localhost:4200](http://localhost:4200/*) 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 ``` 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](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: | | `schemaUrl` | URL to the OpenAPI schema definition. This could be a HTTP path or a path to a local file Eg: 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:` (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, ````json ``` { "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` | `` Form opens on Add Button click | | `blocks.edit` | `boolean` Enable Edit Button | | `blocks.editform` | `` 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.sunbirdrc.dev/use/developers-guide/setup-the-frontend.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.