Versions

| Angular | fts-system-library | |--------------------|:------------------:| | >=14.1.0 < 14.1.x | >= v0.0.10 |

| Edge | Firefox | Chrome | | --------- | --------- | --------- | | last 2 versions | last 2 versions | last 2 versions |

Table of contents

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

Features

• [x] Dynamic Pages
• [x] 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 [email protected]
  npm i [email protected] => npm i minimist => npm i neo-async => npm i source-map => npm i wordwrap => npm i  uglify-js
  npm i @ng-select/[email protected]
  npm i [email protected]
  npm i [email protected]

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/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9  +Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"><  script> 
  <!-- Bootstrap 5.0.2 -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"  integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">< script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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.