Installation

You can download the IntegralUI Web product suite from Downloads page.

What's Included
  • JavaScript files - minified version, located in /components directory
  • CSS - various CSS styles for each component, located in /styles directory
  • Themes - located in /themes directory
  • Dependencies - external libraries are located at /external directory
  • Samples - examples for each component in /quickstart directory
  • Resources - images, icons, cursors and other resources can be found in /resources directory
  • License - licensing information
  • ReadMe file - release notes
Using IntegralUI Web

There are three ways to install the library:

a) Copy/Paste the /bin/integralui to a folder from where you will reference the IntegralUI components in your project

b) Using the repository on GitHub:

   npm install https://github.com/lidorsystems/integralui-web.git

c) Using the npm package:

   npm i integralui-web

In the last two cases only the Trial version of the product is available for installation.

  1. Open a HTML file and for example, if you are using the IntegralUI Grid component, import the component file:

    <script type="module" src="./integralui/components/integralui.grid.js"></script>

  2. Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

    <script type="module">
    
        // (Optional) Templates in Grid component are using LitElement syntax
        // You can find this library already present in /external folder as part of IntegralUI Web
        import { html } from './integralui/external/lit-element.js';
        import { classMap } from './integralui/external/class-map.js';
        import { styleMap } from './integralui/external/style-map.js';
    
        // (Optional) A common service with helpful functions
        import IntegralUICommonService from './integralui/services/integralui.common.service.js';
    
        // (Optional) Enumerations that you may use like IntegralUITheme
        import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums.js';
    
    </script>
                                            

  3. Place the component in HTML using its tag. In case of Grid component use iui-grid. Here is an example:

    <iui-grid id="grid-overview"
        allow-animation="true"
        resource-path="./integralui/icons"
        selection-mode="MultiExtended"
        theme="Office"
    ></iui-grid>
                                            

    Only simple properties (boolean or string) can be set via HTML using attrributes. For complex properties like objects, use JavaScript (you can find example below under step 5).

    In this case, the Grid has:

    • animations active
    • resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
    • selection of multiple rows is enabled
    • Office theme is selected
    • the id attribute is set, used to get a reference to the component

  4. Get a reference to the component using the id attribute (or any other attribute or class that you can use to locate the component in the DOM)

    const grid = document.querySelector('#grid-overview');

    Using this reference you can set any component properties or call methods.

  5. For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

    // An array of column objects
    grid.columns = [
        { id: 1, headerText: "Title", width: 300 },
    
        // . . .
    
    ];
    
    // An array of row objects that contains array of cell objects
    grid.rows = [
        { 
            id: 1, 
            cells: [    
                // cid means column's id 
                // the content of this cell will be displayed under column with corresponding id
                { cid: 1, text: "Cell 11"}  
    
                // . . .
            ]
        },
    
        // . . .
    
    ];
                                            

    A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

    To populate the grid with rows from a remote data source, you can first fetch the data and then call the loadData method:

    fetch("grid-overview-data.json") 
        .then(response => response.json()) 
        .then(data => {
            // Suspend the grid layout from updates, to increase performance
            grid.suspendLayout();
    
            // Load data into the grid
            grid.loadData(convertJSONData(data), null, null, false);
    
            // Resume and update the grid layout
            grid.resumeLayout();
        });
                                            

    The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.html sample.

  6. Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

    grid.size = { width: 800, height: 400 }

  7. And finally, to handle events use the standard addEventListener method to create an event handler. For example for valueChanged event:

    grid.addEventListener("valueChanged", (e) => gridValueChanged(e));
    
    let gridValueChanged = function(e){
        console.log("value changed event fired", e.detail);
    }
                                            

    In case of Web Components, the event data is carried within the event detail field.

  1. In root application (usually it is app.module.ts) file enable use of Web Components by importing and setting the CUSTOM_ELEMENTS_SCHEMA.

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    
    @NgModule({
        declarations: [ AppComponent ],
        imports: [ BrowserModule ],
        providers: [],
        bootstrap: [AppComponent],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class AppModule { }
                                            

  2. In AppComponent file, if you are using the IntegralUI Grid component, import the component file:

    import './integralui/components/integralui.grid.js';

    Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then change the path to /node_modules/integralui-web.

  3. Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

    // (Optional) Templates in Grid component are using LitElement syntax
    // You can find this library already present in /external folder as part of IntegralUI Web
    import { html } from './integralui/external/lit-element.js';
    import { classMap } from './integralui/external/class-map.js';
    import { styleMap } from './integralui/external/style-map.js';
    
    // (Optional) A common service with helpful functions
    import IntegralUICommonService from './integralui/services/integralui.common.service.js';
    
    // (Optional) Enumerations that you may use like IntegralUITheme
    import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums.js';
                                            

  4. Place the component in HTML using its tag. In case of Grid component use iui-grid. Here is an example:

    <iui-grid #grid
        [allowAnimation]="true"
        [columns]="columns"
        [rows]="rows"
        [resourcePath]="currentResourcePath"
        [selectionMode]="currentSelectionMode"
        [size]="gridSize"
        [theme]="currentTheme"
    ></iui-grid>
                                            

    In this case, the Grid has:

    • animations active
    • column and rows
    • resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
    • selection of multiple rows is enabled
    • Office theme is selected
    • size is specified in code
    • the #grid attribute is set, used to get a reference to the component

  5. Get a reference to the component using the angular variable #grid (you can use any other name to locate the component in the DOM)

    @ViewChild('grid', { static: false }) grid: ElementRef;

    Using this reference you can set any component properties or call methods.

    Here the grid variable is not initialized, which will trigger the error from TypeScript compiler stating 'null is not assignable to type'. You can solve this and other compiler errors by setting modifiers in tsconfig.json file (see below).

  6. Depending on current version of TypeScript, you may need to add some settings in tsconfig.json, under "angularCompilerOptions":

    "angularCompilerOptions": {
    
        . . .
    
        "suppressImplicitAnyIndexErrors": true,     // solves implicit any values
        "noImplicitAny": false,             // solves angular could not find a declaration file for module implicitly has an 'any' type
        "strictNullChecks": false           // solves type null is not assignable to type
    
    }              
                                            

  7. For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

    // An array of column objects
    public columns: Array<any> = [];
    
    // An array of row objects that contains array of cell objects
    public rows: Array<any> = [];
    
    // Other properties
    public gridSize: any = { width: 800, height: 400 };
    public currentResourcePath: string = 'app/integralui/icons';
    public currentSelectionMode: IntegralUISelectionMode = IntegralUISelectionMode.MultiExtended;
    public currentTheme: IntegralUITheme = IntegralUITheme.Office;
    
    // You can intialize data within the constructor
    constructor(){
        this.columns = [
            { id: 1, headerText: "Title", width: 300 },
    
            // . . .
    
        ];
    
        this.rows = [
            { 
                id: 1, 
                cells: [    
                    // cid means column's id 
                    // the content of this cell will be displayed under column with corresponding id
                    { cid: 1, text: "Cell 11"}  
    
                    // . . .
                ]
            },
    
            // . . .
    
        ];
    }
                                            

    A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

    To populate the grid with rows from a remote data source, you can first fetch the data using HttpClient and then call the loadData method:

    import { HttpClient } from '@angular/common/http';
    
    export class AppComponent {
    
        constructor(private http: HttpClient){}
        
        ngAfterViewInit(){
            // Load data into the Grid from a JSON file
            let self = this;
    
            // Use HTTP service to get data from the specified JSON file
            self.http.get("./assets/grid-overview-data.json").subscribe((data: any) => {
                // Suspend the grid layout from updates, to increase performance
                self.grid.nativeElement.suspendLayout();
    
                // Load data into the grid
                self.grid.nativeElement.loadData(this.convertJSONData(data), null, null, false);
    
                // Resume and update the grid layout
                self.grid.nativeElement.resumeLayout();
            });
        }
    }
                                            

    The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.ts sample.

  8. To handle events set the event and handler name in HTML and set the handler code in TypeScript. For example for valueChanged event:

    HTML

    <iui-grid #grid
    
        // set grid properties here
    
        (valueChanged)="gridValueChanged($event)"
    
    ></iui-grid>
                                            

    TypeScript

    gridValueChanged(e: any){
        console.log("value changed event fired", e.detail);
    }
                                            

    In case of Web Components, the event data is carried within the event detail field.

  9. Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

    public gridSize: any = { width: 800, height: 400 };

  10. To use icons provided by IntegralUI Web library, make sure you add the following line under angular.json file, under "assets" section:

    . . .
    
    "assets": [
        "src/app/integralui/icons",
        "src/assets"
    ],
                                            

    Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then copy/paste the /node_modules/integralui-web/icons/ under /assets folder in your project.

  1. Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /wrappers directory, which are ReactJS components that provide all public API from an IntegralUI component

  2. Create a new component file and if you are using the IntegralUI Grid component, import the component file:

    import IntegralUIGridComponent from './integralui/wrappers/react.integralui.grid.js';

    Here it is presumed that IntegralUI Web is installed under src/app folder. If you are installing the library from npm, then change the path to /node_modules/integralui-web.

  3. Depending on whether you will use templates, services, enumerations or other components like editors, you also need to import them:

    // (Optional) Templates in Grid component are using LitElement syntax
    // You can find this library already present in /external folder as part of IntegralUI Web
    import { html } from './integralui/external/lit-element.js';
    import { classMap } from './integralui/external/class-map.js';
    import { styleMap } from './integralui/external/style-map.js';
    
    // (Optional) A common service with helpful functions
    import IntegralUICommonService from './integralui/services/integralui.common.service.js';
    
    // (Optional) Enumerations that you may use like IntegralUITheme
    import { IntegralUISelectionMode, IntegralUITheme } from './integralui/components/integralui.enums.js';
                                            

  4. Place the component in HTML using its tag. In case of Grid component use IntegralUIGridComponent. Here is an example:

    render(){
        return (
            <div>
                <IntegralUIGridComponent ref={this.gridRef}
                    allowAnimation={this.state.isAnimationAllowed} 
                    columns={this.state.columns} 
                    resourcePath={this.state.currentResourcePath}
                    rows={this.state.rows} 
                    selectionMode={this.state.selMode}
                    size={this.state.gridSize}
                    theme={this.state.currentTheme}
                ></IntegralUIGridComponent>
            </div>
        );
    }                                      
                                            

    In this case, the Grid has:

    • animations active
    • column and rows
    • resource path is relative to the location where icons, images or other resources are present that are used by the Grid component.
    • selection of multiple rows is enabled
    • Office theme is selected
    • size is specified in code
    • the ref is set to get a reference to the component

  5. Get a reference to the component using the specified ref property to gridRef (you can use any other name to locate the component in the DOM)

    constructor(props){
    
        this.gridRef = React.createRef();
    
    }
                                            

    Using this reference you can call any component methods.

  6. For Grid component the most important properties are columns and rows, which hold a reference to arrays for columns and rows that you want to show.

    constructor(props){
    
        this.state = {
    
            // An array of column objects
            columns: [
                { id: 1, headerText: "Title", width: 300 },
    
                // . . .
    
            ],
    
            // An array of row objects that contains array of cell objects
            rows: [
                { 
                    id: 1, 
                    cells: [    
                        // cid means column's id 
                        // the content of this cell will be displayed under column with corresponding id
                        { cid: 1, text: "Cell 11"}  
    
                        // . . .
                    ]
                },
    
                // . . .
    
            ],
    
            // Other properties
            currentResourcePath: '../integralui/icons',
            currentTheme: IntegralUITheme.Office,
            gridSize: { width: 800, height: 400 },
            isAnimationAllowed: true,
            selMode: IntegralUISelectionMode.MultiExtended
        }
    }
                                            

    A detailed information on structure of column, row and cell objects is available in the Grid API, under Data section.

    To populate the grid with rows from a remote data source, you can first fetch the data and then call the loadData method:

    fetch('./grid-overview-data.json', {
                headers : { 
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Suspend the grid layout from updates, to increase performance
                self.gridRef.current.suspendLayout();
    
                // Load data into the grid
                self.gridRef.current.loadData(this.convertJSONData(data), null, null, false);
    
                // Resume and update the grid layout
                self.gridRef.current.resumeLayout();
            },
            error => {
                console.log("Data is not loaded", error);
            }
        )
    }
                                            

    The Grid is using objects for columns, rows and cells. If your data source is in different format you need to convert the data (when received from the server) in a format acceptable by the Grid component. You can find an example of this conversion here Convert JSON Data into Grid Component or in QuickStart samples, in case for Grid component in grid-overview.ts sample.

  7. Because of virtualization, you need to set up the Grid size. By default the component width and height are auto. Using size property, you can specify the component width and height in pixels. If they are not specified, the default value is used (auto or CSS settings).

    this.state = {
    
        // . . .
    
        gridSize: { width: 800, height: 400 },
    
    }
                                            

  8. To handle events set the event and handler name in HTML and set the handler code. For example for valueChanged event:

    HTML

    <IntegralUIGridComponent ref={this.gridRef}
    
        // set grid properties here
    
        valueChanged={(e) => this.gridValueChanged(e)}
    
    ></IntegralUIGridComponent>
                                            

    JSX

    gridValueChanged(e){
        console.log("value changed event fired", e.detail);
    }
                                            

    In case of Web Components, the event data is carried within the event detail field.

  9. To use icons provided by IntegralUI Web library, make sure you copy/paste the /integralui/icons/ under /public folder in your project.

Initialization of other IntegralUI Web Components is in similar way.

Quick Start

There is a demo application with source code that contains samples for each component included in the IntegralUI Web product package. It can help you to get started quickly with learning about the components and write tests immediatelly.

You can also download this quick-start app from a repository on GitHub:

   npm install https://github.com/lidorsystems/integralui-web-quickstart.git

Depending on the framework (Angular, AngularJS, React or Vanilla JavaScript) you choose, you can start the application in following way. Go to framework specific folder and use the following commands:

Angular

npm install

After installation completes, start the application by typing:

ng serve --open

React

npm install

After installation completes, start the application by typing:

npm start

AngularJS or Vanilla JavaScript

In order to start the application you may need to run it on a local server. You can use the local server provided by Node.js, it is a simple HTTP server package. To install:

npm install http-server -g

To run (from your local directory):

http-server . -p 8000

You can open the application by typing in your browser:

http://localhost:8000/


The application will start displaying the main window with links to all components included. Each component window contains a demo and description about the component functionality. You can checkout the sample source code (located under /samples subfolder) for more information on the sample and component used.