fts-system-library v0.0.15

Versions

Table of contents

• Features
• Getting started
• Dependant NPM
• Include ng-select theme
• Import the DynamicAppsModule
• Configuration
• Users

Features

• Dynamic Pages
• List, Profile, WorkFlow and Dynamic Details templates

Warning

Our library is under active development and may have API breaking changes for subsequent major versions after 0.0.10

Getting started

----    ----    ----    ----    ----    ----    ----    ----

Step 1: 📦 Install fts-system-library:

NPM

  npm install fts-system-library --save

Dependant Npm

  npm i sweetalert2@11.1.2
  npm i handlebars@4.7.8 => npm i minimist => npm i neo-async => npm i source-map => npm i wordwrap => npm i  uglify-js
  npm i @ng-select/ng-select@9.0.2
  npm i ngx-pagination@6.0.3
  npm i ngx-bootstrap@9.0.0

Include ng-select theme:

To allow customization and theming, ng-select bundle includes only generic styles that are necessary for correct layout and positioning. To get full look of the control, include one of the themes in your application. If you're using the Angular CLI, you can add this to your styles.scss or include it in .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 onwards).

  @import "~@ng-select/ng-select/themes/default.theme.css";
  // ... or 
  @import "~@ng-select/ng-select/themes/material.theme.css";

Step 2:

Need to add these bootstrap cdn's in index file of your application:

  <!-- Bootstrap 4.0.0 -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9  +Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"><  script> 
  <!-- Bootstrap 5.0.2 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">< script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"><  script>

Step 3:

Import the DynamicAppsModule in your.module.ts:

  import { DynamicAppsModule } from 'fts-system-library'; 
  @NgModule({
  declarations: [AppComponent],
  imports: [DynamicAppsModule],
  bootstrap: [AppComponent]
  })
  export class AppModule {}

Step 4 :

🔨 Configuration:

• After importing it into your appmodule you have use the below selector(tag app-fts-system) to view the output and also you have to pass the PageId and HostUrl and UserType as input decorator like below, you have to get the PageId and HostUrl and UserType from the FTS System Admin :

  • All the Input-(OR)-API parameters are given below table you can verify that..

  Property	Type	Is Nullable	Description
  CustomerId	string	No	Your user name
  PageId	number	No	Request your system admin
  UserType	number	No	Your user type
  HostUrl	string	No	Request your system admin
  AppName	string	Yes	Request your system admin
  FormId	number	Yes	Request your system admin
  Language	string	No	By default value is English

  <!-- Using our template like this -->
  <app-index [HostUrl]="providedHostUrl" [PageId]="providedPageId" [FormId]="providedFormId"
  [AppName]="providedAppName" [UserType]="yourUserType" [CustomerId]="yourUserName"
  [Language]="userPreferedLanguage"></app-index>

Language Enum:

  export enum E_Language {
    DefaultValue = "English",
    English = "English",
    Arabic = "Arabic",
  }

🎉Users

• Arco

License

Released under the MIT license.

Note: if the library does not give the proper output please stop the application and run the application again and check it will work fine.