Discussion Forum: Widget Creation

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: https://project-sunbird.atlassian.net/wiki/spaces/SBDES/pages/2269708311

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-Widget
Inside 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

Component Name

Component Selector

Component State Name

Input for Component

Output from Component

DiscussCategoryComponent

sb-discuss-category

category

categoryAction

{action: <categoryAction>}

DiscussHomeComponent

sb-discuss-home

categoryHome

categoryHomeAction

{action: <categoryHomeAction>,tid: <tid>, title: <title>}

DiscussionDetailsComponent

sb-discussion-details

categoryDetails

tid: number

slug: string

categoryDetailsAction

{action: <categoryDetailsAction>,topicId: <topicId>}

8. use the widget anywhere in the application as shown below.

Note: Refer to this wiki for usage of widgets: https://project-sunbird.atlassian.net/wiki/spaces/SBDES/pages/2428567587

Limitations For Widget:

same widgets with different configurations will not work in same page