Integration of aurelia-syncfusion-bridge with Aurelia skeleton-navigation-typescript-aspnetcore

25 Oct 201712 minutes to read

Aurelia skeleton-navigation-typescript-aspnetcore is an ASP.NET Core web project pre-configured for building a .NET backend and an Aurelia front-end. It is configured for TypeScript support. This skeleton uses JSPM for package management and SystemJS for loading and bundling.

The aurelia-syncfusion-bridge plugin brings the Syncfusion Essential Studio for JavaScript Widgets into Aurelia world. So, by configuring aurelia-syncfusion-bridge plugin with Aurelia skeleton-navigation-typescript-aspnetcore, we can use Syncfusion components in Aurelia application.

Synopsis

Prerequisites

In the upcoming sections, we will discuss about the integration of aurelia-syncfusion-bridge with Aurelia skeleton-navigation-typescript-aspnetcore.

To quick start with Syncfusion Aurelia components, we have already configured aurelia-syncfusion-bridge with Aurelia skeleton-navigation-typescript-aspnetcore. Those who are wish to directly getting started with Syncfusion Aurelia components execute the below commands and navigate to here.

  • BASH
    • > git clone https://github.com/aurelia-ui-toolkits/syncfusion-templates-repository.git
> cd syncfusion-templates-repository/skeleton-typescript-aspnetcore/src/skeleton
> npm install

    Aurelia skeleton-navigation-typescript-aspnetcore

    In this section, we will discuss about the installation of Aurelia project dependencies.

    • Download Aurelia skeleton-navigation from this link and extract it.
    • From the extracted folder, execute the following commands to install project dependencies.
  • BASH
    • > cd skeleton-typescript-aspnetcore/src/skeleton
> npm install

    NOTE

    Ensure all the dependencies are installed without any errors.

    NOTE

    While running the application, we may encounter issues like error TS***: Duplicate identifier due to the typescript configuration. To overcome from this error remove the global dependencies from typings.json.

  • JAVASCRIPT
    • "globalDependencies": {
    "url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
    "whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
  }

    Installation of syncfusion-javascript Widgets and aurelia-syncfusion-bridge

    Install syncfusion-javascript Widgets and aurelia-syncfusion-bridge by executing the following commands.

  • BASH
    • > jspm install npm:syncfusion-javascript
> jspm install npm:aurelia-syncfusion-bridge css

    Bridge registration

    In this section, we will discuss about the registration of Syncfusion bridge with Aurelia.

    Register the aurelia-syncfusion-bridge plugin with Aurelia in our main.ts file which is in src folder. For example, to register ejGrid component, we need to import syncfusion-javascript/Scripts/ej/web/ej.grid.min in main.ts file.

  • JAVASCRIPT
    • import 'bootstrap';
import { Aurelia } from 'aurelia-framework';
import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min';
export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    //register aurelia-syncfusion-bridge plugin here
    .plugin('aurelia-syncfusion-bridge', (syncfusion) => syncfusion.useAll());
  aurelia.start().then(() => aurelia.setRoot());
}

    NOTE

    To use ejTemplate, we need to add syncfusion.ejGrid().ejTemplate(); in our main.ts file.

    NOTE

    To load button component with grid component additionally, we need to import syncfusion-javascript/Scripts/ej/web/ej.button.min and add syncfusion.ejGrid().ejButton(); in our main.ts file.

    NOTE

    To load all Syncfusion components, we need to import syncfusion-javascript/Scripts/ej/web/ej.web.all.min and add syncfusion.useAll() in our main.ts file.

    Getting started

    In this section, we will discuss about the creation of Aurelia Syncfusion Grid component.

    The below step describes to create Syncfusion Aurelia Grid component.

    • Create grid.html file inside src/samples/grid folder structure and use the below code example to render the Grid component.
  • HTML
    • <template>
    <div>
        <ej-grid e-data-source.two-way="gridData" e-allow-paging=true e-allow-sorting=true e-on-record-click.delegate="recordClick($event.detail)">
            <ej-column e-field="OrderID" e-header-text="Order ID" e-text-align="right"></ej-column>
            <ej-column e-field="CustomerID" e-header-text="Customer ID"></ej-column>
            <ej-column e-field="EmployeeID" e-header-text="Employee ID" e-text-align="right"></ej-column>
            <ej-column e-field="Freight" e-header-text="Freight" e-format="{0:C}" e-text-align="right"></ej-column>
            <ej-column e-field="OrderDate" e-header-text="Order Date" e-format="{0:MM/dd/yyyy}" e-text-align="right"></ej-column>
        </ej-grid>
    </div>
</template>
    • Create grid.ts file with the below code snippet inside src/samples/grid folder.
  • JAVASCRIPT
    • export class Grid {
  gridData: any;
  constructor() {
    this.gridData = [{
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5,
      OrderDate: new Date(8364186e5), Freight: 32.38
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6,
      OrderDate: new Date(836505e6), Freight: 11.61
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4,
      OrderDate: new Date(8367642e5), Freight: 65.83
    },
    {
      OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3,
      OrderDate: new Date(8367642e5), Freight: 41.34
    },
    {
      OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4,
      OrderDate: new Date(8368506e5), Freight: 51.3
    }];
  }

  recordClick(e) {
    //handle event here
  }
}
    • Add Syncfusion theme in our project by adding the below code snippet in src/app.html file.
  • HTML
    • <template>
    <require from="nav-bar.html"></require>
    <require from="bootstrap/css/bootstrap.css"></require>
    <!--Add Syncfusion JavaScript themes here-->
    <require from="syncfusion-javascript/Content/ej/web/ej.widgets.core.bootstrap.min.css"></require>
    <require from="syncfusion-javascript/Content/ej/web/bootstrap-theme/ej.theme.min.css"></require>
    <require from="syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css"></require>
    <nav-bar router.bind="router"></nav-bar>
    <div class="page-host">
        <router-view></router-view>
    </div>
</template>
    • Now, we are going to configure the navigation for created Grid sample in src/app.ts file.
  • JAVASCRIPT
    • import { Router, RouterConfiguration } from 'aurelia-router';
export class App {
  public router: Router;
  public configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',           nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: 'users',             nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: 'child-router',      nav: true, title: 'Child Router' },
      //Add the router configuration for Grid sample here
      { route: 'grid',          name: 'grid',         moduleId: 'samples/grid/grid', nav: true, title: 'Grid' }
    ]);
    this.router = router;
  }
}

    Building the Application

    To restore project dependencies and build application, execute the following commands

  • BASH
    • > dotnet restore
> gulp build

    Running the Application

    To run the app, execute the following command and browse to http://localhost:5000 to see the application.

  • BASH
    • > dotnet run

    Deploying the Application in production

    To deploy the application in production, we need to configure build/bundles.js and build/export.js.

    In build/bundles.js, we need to include both aurelia-syncfusion-bridge and syncfusion-javascript in bundles.

    To bundle ejGrid component, we need to include grid resources in build/bundles.js as like the below code section.

  • JAVASCRIPT
    • "dist/aurelia-syncfusion-bridge": {
      "includes": [
        "aurelia-syncfusion-bridge",
        "aurelia-syncfusion-bridge/grid/*.js",
        "text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
},
"dist/syncfusion-javascript": {
      "includes": [
        "syncfusion-javascript/Scripts/ej/web/ej.grid.min.js"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
}

    NOTE

    To bundle all Syncfusion components, add aurelia-syncfusion-bridge/**/*.js to dist/aurelia-syncfusion-bridge and syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js to dist/syncfusion-javascript as like the below code snippet.

  • JAVASCRIPT
    • "dist/aurelia-syncfusion-bridge": {
      "includes": [
        "aurelia-syncfusion-bridge",
        "aurelia-syncfusion-bridge/**/*.js",
        "text"
      ]
      ......
      ......
},
"dist/syncfusion-javascript": {
      "includes": [
        "syncfusion-javascript/Scripts/ej/web/ej.web.all.min.js"
      ]
      ......
      ......
}

    NOTE

    While running the application in production environment, we may encounter issues like Failed loading required CSS file. To overcome this error, add text plugin to dist/aurelia-syncfusion-bridge which will load all text resources.

    In build/export.js, we need to include Syncfusion themes in normalize array.

  • JAVASCRIPT
    • 'normalize': [
    // include Syncfusion theme
    [
      'syncfusion-javascript', [
        '/Content/ej/web/ej.widgets.core.bootstrap.min.css',
        '/Content/ej/web/bootstrap-theme/ej.theme.min.css',
        '/Content/ej/web/common-images/**',
        '/Content/ej/web/bootstrap-theme/images/**',
        '/Content/ej/web/responsive-css/ej.responsive.css'
      ]
    ],
    [
      // include font-awesome.css and its fonts files
      'font-awesome', [
        '/css/font-awesome.min.css',
        '/fonts/*'
      ]
    ]
]

    Then run the below command to export our application in production.

  • BASH
    • > gulp export

    The app will be exported into export directory preserving the directory structure.