Content Saas | Learning to walk with Bloomreach content SaaS

Blogs to enjoy before this one

This is Blog number 2 of what I hope will become a Content Saas | Learning to series.
As such, to get a better idea of where we are, you should at least glance at the Content SaaS | Learning to Crawl with Bloomreach Content SaaS Blog.
If any questions come up during this blog, you can check the documentation website or the blog mentioned above.

What will be covered in this blog

So, you have access to Bloomreach Content SaaS and have created a couple of documents and pages. But how do we display something on that page? What if we want to create something a bit more costume?
In this blog, we'll continue working on a fully integrated website and we'll answer the above questions.
We'll start by customizing the Blog page that we created on the previous Blog post.

Learning to walk | How I learned to add components to pages

After you've logged in to your instance of Bloomreach Content SaaS navigate to the Experience Manager tab.

Navigate to the Blog Page. You can do this via the Menu item we created last time or via the Sitemap And Components Button.

Now that we're on the Blog page, we can proceed to add an already existing Component to the page.
But what is a Component? A Component is just a part of the website that can be reused as desired. For example, we could use a Banner with an image and a Title as a Component.

Components are added to Containers.
You can view all containers on a page by clicking the Show Components outlines and content Button button.

To add a Component to the page, click on the Sitemap and Components button. This will display all the Sitemap Items and all the Components. Click on the Component button.

This shows us a list of all available Components, be it Page specific Components or Shared Components.

The only difference between Page Specific Components and Shared components is the way they retrieve the information to display.

Page Specific Components receive arguments directly in the component. This is more direct, but it forces you to rewrite the same information if you want to have the same component with the same fields.

Shared Components require you to provide a document with all the information.

For now, let's simply add a ** Reference SPA Title & text ** single page component to the main container. You can give whatever values you want.
This is the main container as you can see via the name.

The Page should now look something like this.

Then, we click on the components tab.

Learning to walk | How I learned to create my own components

As you might have noticed, there's a limited amount of Components and they can't possibly cover all possible use cases.
This is why Bloomreach Content SaaS enables you to create costume components with virtually unlimited possibilites. From the most basic of components to the most complex.

To create Components, simply click on the Site development tab.

Then, we click on the components tab.

And follow by clicking the +Components Button.

This will show you a tab with a lot of different fields.

The Display Name defines the name that will be displayed in the Sitemap And Components tab.
The ctype field allows us to define the Component Name that the frontend will work refer to.

The Extends field defines what type of component we are going to create.
There are 3 choices for the Extends field.

The base/component field allows us to add a simple component without much background logic.

The ** base/menu** field allows us to create an extra menu component that can be used.

The base/query field allows the component to perform queries in the background.

For now, we will be using the base/component.
Fill in the fields with the following values and then click the Create button.

The base/component field allows us to add a simple component without much background logic.

Now, navigate to the Properties of the newly created component and click the + Property Button.

We will continue by adding a single Title property. This will be used in the frontend to display some text.

We've just created our first component. Currently, it's very simple, but we'll continue to iterate over this component in the following blogs.

Now, if you go back to the Experience Manager, you'll see the component is now available.

Add it to the Right Container on the Blogs page. You'll find that while the component is added you won't see anything.

This is okay for now and will be addressed in the next chapter.

Learning to walk | How I learned to develop the front-end for my own components

So far, we've managed to customize the Blogs page with some pre-existing components and even create our very own costume component.
Now, all that's missing, is adding some frontend logic to the just created component.

First thing, we need to connect our local frontend with the Bloomreach Content SaaS environment.
In this Blog, we are using https://github.com/bloomreach/bloomreach-reference-spa.
You might be using something different and that's okay.
Just make sure to connect the frontend correctly.

In the .env file quickly change the NEXT_PUBLIC_BRXM_ENDPOINT to connect to your environment.
It should be something like this:

NEXT_PUBLIC_BRXM_ENDPOINT=https://<context-path>/delivery/site/v1/channels/<channel>/pages

Finally, in your channel settings make sure to point to the localhost url!

Now that we've set up the frontend, we need to create a component with the exact same name as the component we created.

In the React SPA project, we simply create the component folder in the components folder.

Then, we simply start to write the frontend code.

import React from 'react';
import { ContainerItem, getContainerItemContent } from '@bloomreach/spa-sdk';
import { BrProps } from '@bloomreach/react-sdk';

export function AllBlogsComponent({ component, page }: BrProps<ContainerItem>): React.ReactElement | null {
  if (!component || !page) { return null; }

  if (component.isHidden()) {
    return page.isPreview() ? <div /> : null;
  }

  const { title:parameterTitle } = component.getParameters();

  return (
    <div>
      {parameterTitle && <h1>{parameterTitle}</h1>}
    </div>
  );
}

And finally, we export it in index.ts

export { AllBlogsComponent } from './AllBlogsComponent';

Then, we simply add the export to the App.ts and index.ts.

The final result will look like this.

Conclusions

Congratulations!

Over this blog, we managed to customize the Blogs page with a title and text and we've managed to even create our custom component with whatever frontend code we want.
In the next blog, we will continue by improving the Blog page and further adding complexity to the Component we just created.