This document will help to create the Discussion-UI library Widgets.
Prerequisite:
Discussion-UI library to be setup and running.
Note: Refer to this wiki for setup: Developer's Doc: How to set-up and use Discussions-UI library
Architecture Diagram:
Steps to create Discussion-UI library widgets:
setup the library
In the application create a folder with the widget name you want to create
Ex: Category-WidgetInside the folder create the html file with name “category-widget-component.html“
copy the below code into the html file.
Single Component Widget:<div> <lib-discuss-category *ngIf='state === category ' (stateChange)='stateChange($event)'></lib-discuss-category> </div>
Mulitple Component WIdget:<div> <lib-discuss-category *ngIf='state === category ' (stateChange)='stateChange($event)'></lib-discuss-category> <lib-discuss-home *ngIf='state === homePage' (stateChange)='stateChange($event)'></lib-discuss-home> <lib-discussion-details *ngIf='state === detailsPage' [topicId]='tid' [slug]='slug'></lib-discussion-details> </div>
Inside the folder create the component with name “category-widget-component.ts“
Inside the component copy the below code.
import { Component, Inject, Input, OnInit } from '@angular/core' import { ConfigService, IdiscussionConfig, EventsService, NavigationServiceService, DiscussionService, BaseWrapperComponent } from '@project-sunbird/discussions-ui-v8' @Component({ selector: 'sb-category-widget', templateUrl: './category-widget.component.html', styleUrls: ['./category-widget.component.css'] }) export class CategoryWidgetComponent extends BaseWrapperComponent { @Input() discussionConfig!: IdiscussionConfig category = CONSTANTS.CATEGORY; detailsPage = CONSTANTS.CATEGORY_DETAILS homePage = CONSTANTS.CATEGORY_HOME tid!: number slug!: string categoryId: any constructor( @Inject(ConfigService) configSvc: ConfigService, @Inject(DiscussionService) discussionService: DiscussionService, @Inject(NavigationServiceService) navigationServiceService: NavigationServiceService, @Inject(EventsService) eventService: EventsService) { super(navigationServiceService, eventService, configSvc, discussionService,) } // @Input() config wrapperInit() { this.state = this.category } stateChange(event) { this.state = event.action }
7. Now the “sb-category-widget“ is ready to use.
Component Details:
Component Name | Component Selector | Component State Name | Input for Component | Output from Component |
---|---|---|---|---|
|
|
| NA |
|
|
|
| NA |
|
|
|
|
|
|
8. use the widget anywhere in the application as shown below.
<sb-category-widget [config]="discussionConfig"></sb-category-widget>
Note: Refer to this wiki for usage of widgets: Discussion Forum: Widget Integration
Limitations For Widget:
same widgets with different configurations will not work in same page