🧒
Sunbird ED
new release -7.0.0 (Jun 2024)Askdot
latest
latest
  • Learn
    • Overview
    • Capabilities
      • Learning Apps
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and diverse content
      • Versatile Question Bank
      • Observability
      • Launch Course
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • What is an entity?
        • What is a Program?
        • What is a Project?
        • What is Observation?
        • What is a Survey?
        • What is Observation as a task inside a Project?
      • Product and Developer's Guide
        • Learning apps
          • Workflows
            • Onboarding of Users
            • Discovery of Content
            • Play content
            • Track progress and Earn credentials
            • Interacting / Collaborating
        • Asset Sourcing
        • Organised Collections
        • Discover Content - Digital & Phygital
        • User Engagement
        • Rich and Diverse Content
        • Versatile Question Bank
        • Observability
        • Launch Courses
        • Verifiable Credentials
        • Multi-Channel Chatbot
        • Targeted Programs
        • Manage Learn
          • Overview
          • Component Diagram
          • ML Core Service
          • ML Project Service
          • ML Survey Service
          • ML Report Service
          • ML Analytics Service
    • Tech Overview
      • Design Principles
      • Technical Architecture Diagram
      • Tech Stack
    • Adopters
      • DIKSHA
    • Roadmap
      • Plan for 2025-2026
      • Releases and Dates
  • USE
    • Getting Started - Setup
      • Pre-requisites
      • Install
      • Functional Configurations
    • Developer Guide - Overview
      • Architecture - Component Diagram
      • System Requirements
        • Learning Apps
      • Install Locally
        • SunbirdED Mobile
        • SunbirdED Portal
      • Easy Installer
        • Adding Support for a New Cloud Provider
      • Configuration
        • SunbirdEd Portal
        • Sunbird Mobile
      • Portal
        • Component Diagram
        • I18N (Resource Bundles)
        • Branding Name and Logo Configuration Guide
      • Desktop
        • Component Diagram
      • Mobile
        • Component Diagram
        • sunbird-mobile-sdk
        • Sunbird-mobile-app plugins
        • Configurations to setup mobile app
        • I18N (Resource Bundles)
      • Form service
        • Component Diagram
        • Data model
        • API's
      • Manage Learn
        • ML Core Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Project Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Survey Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Report Service
          • Overview
          • User Flow Diagram
          • Component Diagram
          • Data Model
          • Folder Structure
          • API's
          • Deployment Overview
          • Local Service Setup Guide
        • ML Analytics Service
          • Overview
          • Component Diagram
          • Data Model
          • Setup Guide
            • ENV Variables ( Config.ini)
          • Ingestions
          • Folder Structure
          • Report creation and Updation Scripts
          • Deployment Overview
      • UI (User interface)
        • Angular Material
          • Overview
          • Installation
          • Material Icons
          • Components Usage
          • Theming
          • Theme Setup
          • Customazion
            • Palette
            • Theme
            • Accessibility
            • Colors
            • Typography
            • Components
              • Buttons
              • CC Components
        • Component Style Guide Version 1
          • Accordion
          • Buttons
          • Cards
          • Forms
          • Grid & Layout
          • Labels
          • Modals
          • Pagination
          • Rating
          • Search Box
          • Select Box
          • Tables
          • Tabs
          • Toast messages
          • Tooltip
          • Typography
        • SB-Styles: A Comprehensive Design Resource
        • SB-Themes Repository: Unifying Design Across Platforms
          • Classical Theme in Sunbird-Ed portal
          • Joyful Theme in Sunbird-Ed portal:
      • Reference Apps
        • Independent Libraries
          • Common Consumption Components
          • SunbirdEd Forms
          • Sunbird Client Services
          • Sunbird Styles
          • Sunbird Themes
          • Sunbird Tag Manager
      • API's
      • CSP changes
      • Cloud-Store SDK Maven Deployment Guide
      • Other
        • Building Images
        • Minimal forms
        • Telemetry
          • Trackable Collection
        • Platform
        • Learning Apps
    • Learn More
      • Dependencies
      • Specifications
        • SOFIE
        • SOFIE Implementation
  • SB Ed Releases
    • Sunbird v7.6.0 (Latest)
    • Sunbird v7.5.1
    • Release - SB 7.5
    • SB Release - 7.0.0
      • Release notes
      • Updating Sunbird Releases
        • 6.0.1 to 7.0.0
      • Release Calendar 7.0.0
      • Demo of released items
  • Engage
    • Discuss
    • Contribute to Sunbird ED
    • Extend / Contribute to Sunbird
    • Issue tracker/ Create Issue
  • Misc
    • Templates
      • Upgrade Sunbird release document
      • Release Notes
    • Misc Pages
      • Portal - Manage Learn - Reports
      • App - Manage Learn - component diagram
        • Projects
        • Observation & Survey
        • Program
      • Portal - Manage Learn - component diagram
      • Mobile form configurations
      • Content Indexing Flow
      • What are multiple databases used for
      • Course completion, reports and certificate issue
      • How to access Flink UI
      • What are all the flink jobs for
      • How does data flow into Druid
      • Minimal build properties
      • Delete User Functionality
    • Archived
      • High Level Capabilities
      • Workflows
      • Where Sunbird ED helps you
      • ED - Mobile App (going to archive)
        • 4.10.3 to 5.0.0
        • 5.0.0 to 5.1.0
      • Setting up Sunbird ED
      • Developer Documentation
      • API Reference Documentation
      • Detailed Documentation
      • Source Code
      • Actors & Actions
      • Detailed Capabilities
      • Data
      • Terminology
      • 5.1.0-hotfix (OCI )
      • Getting started (v7)
        • Deployment Overview
        • Pre-requisites
        • Install
          • Provision Cloud Infrastructure
          • Setup Jenkins
          • Update Ansible Variables
          • Build, Provision and Deploy
          • Functional Configurations
Powered by GitBook
On this page
  • Available components
  • Getting Started
  • Step 1: Install the package
  • Step 2: Include the sb-styles and assets in angular.json
  • Step 3: Import the modules and components
  1. USE
  2. Developer Guide - Overview
  3. Reference Apps
  4. Independent Libraries

Common Consumption Components

Contains common UI components powered by angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.

Video on Common Consumption Components

https://github.com/Sunbird-Ed/SunbirdEd-consumption-ngcomponents

Criteria
Info

Current Release Branch

v9_Migration_Branch

NPM Published version (Latest)

4.5.2

NPM Package Name

@project-sunbird/common-consumption-v9

NPM Link

Works

In Angular Projects Only

Available components

\

Component
Code

Basic Card to represent a content/asset/collection

<sb-library-card-v2><sb-library-card-v2>

Can be used in the courses page to represent course distinctively

<sb-course-card><sb-course-card>

Can be used in the My courses section for all consumption platforms

<sb-my-course-card></sb-my-course-card>

Can be used to represent a content in a collection.

NA

Can be used represent list of collection for all consumption platforms

<sb-library-cards-grid [title]="Grid Title" [isLoading]="isLoading[maxCardCount="3"><sb-library-cards-grid>

Can be used represent list of courses for all consumption platforms

<sb-course-cards-hlist [multiRow]="true" [contentList]="range(15)"[type="'curiculum_course_card_grid'" [title]="'Courses'" [isLoading]="isLoading"><sb-course-cards-hlist>

Can be used represent Stack of collections for all consumption platforms

<sb-library-cards-stack [title]="Stack Title"[contentList]="range(15)" [maxCardCount]="3" [isLoading]="isLoading"></sb-library-cards-stack>

Used to construct filters based on facets

Faq Section for Consumption Clients with intractable events. This is form configuration driven.

Can be used with library card to add overlay on card with action items

shows given array of Items with accordion structure.

Shows given array of Items with accordion structure.

Member Card With Menu.

<sb-member-card></sb-member-card>

Member List With Cards.

<sb-member-list [layoutConfig]="{size:'medium', isBold:false, isSelectable:true,view:'horizontal'}" [memberList]="range(15)" [isMenu]="false"(cardClick)="memberCardClick`` ($event)" (menuClick)="menuClick($event)"></sb-member-list>`

Group Card.

<sb-group-card></sb-group-card>

Getting Started

For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using .

Step 1: Install the package

npm install @project-sunbird/common-consumption --save
npm install @project-sunbird/sb-styles --save

Step 2: Include the sb-styles and assets in angular.json

"styles": [

...

...

"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"

]

Add following under architect.build.assets

 {
    ...
    "build": {
    
    "builder": "@angular-devkit/build-angular:browser",
    
    "options": {
    
	    ...
	    ...

	    "assets": [
		   ...
		   ...
		    {
			    "glob": "**/*.*",
			    "input": "./node_modules/@project-sunbird/common-consumption/assets",
			    "output": "./assets/common-consumption"
		    }
	    ],
    "styles": [
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
    
    ],
    
    ...
    ...

},

Step 3: Import the modules and components

Import the NgModule for each component you want to use:

import { CommonConsumptionModule} from '@project-sunbird/common-consumption';

@NgModule({
    ...
    
    imports: [CommonConsumptionModule],
    
    ...
})
export class TestAppModule { }

Alternatively, you can create a separate NgModule that imports and then re-exports all of the Angular components that you will use in your application. By exporting them again, other modules can simply include your CustomSunbirdComponentsModule wherever components are needed, and automatically get all of the exported modules. A good place for importing/exporting the application-wide modules is the SharedModule.

import { CardsModule } from '@project-sunbird/common-consumption/card';

import { PopoverModule } from '@project-sunbird/common-consumption/popover';

@NgModule({

...

imports: [CardsModule, PopoverModule],

exports: [CardsModule, PopoverModule],

...

})


export class MyOwnCustomSunbirdComponentsModule { }

For More Information, Please refer to GitHub repo link.

(sb-library-card-v2)

(sb-course-card)

(sb-my-course-card)

(sb-toc-card)

(sb-library-cards-grid)

(sb-course-cards-hlist)

(sb-library-cards-stack)

(sb-library-filters)

(sb-faq)

(sb-card-hover)

(sb-toc-item)

(sb-toc-item)

(sb-member-card)

(sb-member-list)

(sb-group-card)

https://www.npmjs.com/package/@project-sunbird/common-consumption-v9
LibraryCard
CourseCard
MyCourseCard
TocCard
LibraryCardsGrid
CourseCardsGrid
LibraryCardsStack
LibraryFilters
FAQ Component
Card hover component
TOCItem component
TOCChildItem component
Member Card component
Member List component
Group Card component