...

• The command-palette library can be installed to enable further support of navigation by keyboard.
  >> www.npmjs.com/package/@yuuvis/command-palette
• The widget-grid library can be installed for creating custom dashboards. Widgets can be registered and afterwards configured by the users.
  >> www.npmjs.com/package/@yuuvis/widget-grid 
  Note: The feature is still in a testing phase. We preserve to apply any changes to its functionality.
• The widget-grid-widgets library contains a set of suitable widgets to be used with the widget-grid library.
  >> www.npmjs.com/package/@yuuvis/widget-grid-widgets 
  Note: The feature is still in a testing phase. We preserve to apply any changes to its functionality.

Installation Steps

• First, you need to install the npm module.

  • For the core library:

    Code Block
    language bash
    npm install @yuuvis/core --save

    
    

  • For the framework library (the command installs the core library as well):

    Code Block
    language bash
    npm install @yuuvis/framework --save

    
    

• Import YuvCoreModule to use @yuuvis/core in your Angular project. You have to import YuvCoreModule.forRoot() in the root NgModule of your application.

  Code Block
  language js
  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { YuvCoreModule } from '@yuuvis/core'; @NgModule({ imports: [BrowserModule, YuvCoreModule.forRoot()], bootstrap: [AppComponent] }) export class AppModule

  
  

• Configure YuvCoreModule via assets/default/config/main.json configuration file. By default it looks like this:
  

  Code Block
  language yml
  "core": { "apiBase": { "core": "/api", "api-web": "/api-web/api" }, "languages": [ { "iso": "de", "label": "Deutsch" }, { "iso": "en", "label": "English", "fallback": true } ], "logging": { "level": "debug"

  
  

• Configure translations set up by a translations module provided by the core library that can be used within your application. This module will be bound to the language a user has set up on the yuuvis® Momentum backend. In order to be able to initialize this module, translation files are required. By default, they are supposed to be located at assets/default/i18n/. In this directory, you provide a file for each supported language (en.json, de.json, ...). If you do not need translations, just provide empty files.
  You are able to change the default directory for the configuration by providing different locations to the module config when you import YuvCoreModule or YuvFrameworkModule:
  

  Code Block
  language js title Example import 'YuvCoreModule' collapse true
  @NgModule({ imports: [ YuvCoreModule.forRoot({ main: ['assets/my-custom-path/config/main.json'], translations: ['assets/my-custom-path/i18n/'] }) ], bootstrap: [AppComponent] }) export class AppModule

  
  

  Code Block
  language js title Example import 'YuvFrameworkModule' collapse true
  @NgModule({ imports: [ YuvFrameworkModule.forRoot({ main: ['assets/my-custom-path/config/main.json'], translations: ['assets/my-custom-path/i18n/'] }) ], bootstrap: [AppComponent] }) export class AppModule

  
  

  
  

• Use the libraries:

  • Core library: Import the services you want to use into your components:

    Code Block
    language js
    import { UserService } from '@yuuvis/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { constructor(private userService: UserService) {}

    
    

  • Framework library: Import the components you want to use into your components.

...