Using And Customizing The Angular Plone Components#

Preparing The Plone Backend#

We need a Plone server running the latest version of Plone REST API.

We will use a Plone pre-configured Heroku instance.

Once deployed, create a Plone site, then go to the Site Setup ‣ Add-ons and Install Plone RESTAPI.

It will also be helpful for development to turn off CORS. There are many ways to do that. For example, in Google Chrome we can install an extension Allow CORS: Access-Control-Allow-Origin that takes care of it. For Firefox you can use the CORS Everywhere add-on

Adding The @plone/restapi-angular Dependency#

npm install @plone/restapi-angular --save

The @plone/restapi-angular and its own dependencies have been installed in our ./node_modules folder.

Note

the --save option ensures the dependency is added in our package.json.

We are now ready to use the Plone Angular SDK.

Connecting The Project To The Plone Backend#

In src/app/app.module.ts, load the Plone module and set the backend URL:

import { RESTAPIModule } from '@plone/restapi-angular';

...

@NgModule({
  ...
  imports: [
    ...
    RESTAPIModule,
  ],
  providers: [
    {
      provide: 'CONFIGURATION', useValue: {
        BACKEND_URL: 'http://whatever.herokuapp.com/Plone',
      }
    },
  ],
  ...

Warning

Make sure to use http and not https because the Heroku web configuration is not set up properly for that.

We have to set up the default Plone views for traversal in src/app/app.component.ts:

 import { Component } from '@angular/core';
 import { PloneViews } from '@plone/restapi-angular';

 @Component({
 ...
 })
 export class AppComponent {

 constructor(
  public views:PloneViews,
 ) {
   this.views.initialize();
 }
}

We need to insert the Plone view in our main page. Let's change src/app/app.component.html this way:

<traverser-outlet></traverser-outlet>

Now, traversing is active, so we can visit the following links:

  • http://localhost:4200/front-page

  • http://localhost:4200/news

  • http://localhost:4200/events

Despite our very bad looking rendering, any content stored in our Plone backend can be requested locally.

The same goes for default views, like:

  • http://localhost:4200/@@sitemap

  • http://localhost:4200/news/@@search?SearchableText=News

We are also able to use Plone components provided by the SDK. Let's change again src/app.component.html:

<plone-global-navigation></plone-global-navigation>
<plone-breadcrumbs></plone-breadcrumbs>
<traverser-outlet></traverser-outlet>

Now we get the main navigation bar and the breadcrumbs. Note the navigation is performed client-side (the page is not reloaded).