creative-bootstrap-components

Implementation of the Creative design for WCH.

Changes

CHANGELOG

Usage

This library is meant to be used in an Angular based application.

Using Schematics

The easiest way to add the component to your application is via the ng add command line. Execute the following command from within the application folder:

ng add @dx-samples/creative-bootstrap-components

This will install the library and also execute the necessary changes to your source files.

Add the library to your Application explicitly

If you prefer to add the library to your project without tooling, follow this process:

• add @dx-samples/creative-bootstrap-components to the dependencies of your project

npm install --save @dx-samples/creative-bootstrap-components

• import WchNgBootstrapComponentsModule into your main application, e.g. like this:

src/app/app.module.ts

import { LAYOUTS } from './layouts';
import { WchNgModule } from 'ibm-wch-sdk-ng';
import { environment } from '../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

// modification start
import { WchNgEditModule } from 'ibm-wch-sdk-ng-edit';
import { WchNgBootstrapComponentsModule } from '@dx-samples/creative-bootstrap-components';
// modification end

@NgModule({
  declarations: [AppComponent, ...LAYOUTS],
  imports: [
    BrowserModule,
    AppRoutingModule,

    // modification start
    WchNgBootstrapComponentsModule,
    WchNgEditModule.forRoot(),
    // modification end

    WchNgModule.forRoot(environment)
  ],
  providers: [],
  entryComponents: [...LAYOUTS],
  bootstrap: [AppComponent]
})
export class AppModule {}

This process provides all layouts to the single page application.

Note We are working on making it simpler to add the module to the application, stay tuned.

Deploy the application and WCH artifacts

The library bundles the WCH content types, layouts and layout mappings. Deploy these artifacts to WCH, e.g. by using the following command of the CLI:

ibm-wch-sdk-cli application push --data ./data/ --override --aggregated

The --aggregated flag makes sure to not only deploy the application data but also the bundled dependencies.

Note: In order to successfully execute the command make sure to meet me prerequisites mentioned in the documentation of the CLI.

Class documentation

Refer to the documentation.

Example

This is how a microsite using these components might look like:

References

• The original Creative template
• Type definitions for WCH
• Demo content to speed up the setup