Integrate SPEAK 3 applications with Sitecore

Version: 9.0

SPEAK 3 applications are Angular applications. They can run independently of Sitecore. However, the purpose of SPEAK 3 is to make it simple to integrate Sitecore-branded Angular applications with a Sitecore CM (content management) server and the Sitecore user interface.

The Sitecore integration affects several areas. The topics that describe these areas are listed here.

This topic describes how to set up a development environment so you can use the SPEAK 3 Sitecore integration features.

Base configuration, using the NgScModule (composite module)

The NgScModule Angular module includes the following Sitecore integration features:

  • Sitecore context

  • Translations for applications

  • Translations for the SPEAK 3 component library

  • Component user access authorization

  • Preventing cross-site request forgery (Anti-CSRF)

You do not have to import the feature modules yourself.

Dependencies

The NgScModule module has a dependency on ngx-translate, which SPEAK 3 makes available for translations in applications. To make it easier to set up, the NgScModule module configures and exports ngx-translate.

Configuration

Follow these steps to configure the Sitecore integration:

  1. Configure the module:

    RequestResponse
    // imports

import { NgScModule } from '@speak/ng-sc';
import { CONTEXT, DICTIONARY } from '@speak/ng-bcl';

// App module imports

@NgModule({
   imports: [
       NgScModule.forRoot({
        contextToken: CONTEXT, // Provide Sitecore context for SPEAK 3 Components (optional)
        dictionaryToken: DICTIONARY, // Provide translations for SPEAK 3 Components (optional)
       translateItemId: '0C979B7C-077E-4E99-9B15-B49592405891', // ItemId where your application stores translation items (optional)
       authItemId: '1BC79B7C-012E-4E9C-9B15-B4959B123653' // ItemId where your application stores user access authorization (optional)
       })
      ],

   declarations: [AppComponent],
   bootstrap: [AppComponent]
})

export class AppModule { }
    Note

    You must change the items IDs for translateItemId and authItemId to the actual values in your Sitecore instance.

  2. Initialize NgScService when your application initializes:

    RequestResponse
    // app.component.ts

import { Component, OnInit } from '@angular/core';
import { NgScService } from '@speak/ng-sc';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

constructor(
    private ngScService: NgScService
) {}
    ngOnInit() {
    this.ngScService.init();
    }
}

Advanced configuration using single modules

The following topics describe how you use single individual modules, if you want to include these modules individually:

Do you have some feedback for us?

If you have suggestions for improving this article,