Discussion Forum: Widget Creation

This document will help to create the Discussion-UI library Widgets.

Prerequisite:

1. 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:

1. setup the library

2. In the application create a folder with the widget name you want to create
   Ex: Category-Widget

3. Inside the folder create the html file with name “category-widget-component.html“

4. 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> 

5. Inside the folder create the component with name “category-widget-component.ts“

6. 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:

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:

1. same widgets with different configurations will not work in same page