Extending Content Delivery Storage in SDL WEB 8.5 - Part 3

In the last blog, we saw what happened when we publish a new component, it only calls the create method, but when we re-publish an item it first calls the remove method and then create.

Remove Method

public void remove(int publicationId, int componentId, int componentTemplateId, ComponentPresentationTypeEnum componentPresentationType)

throws StorageException

{

log.debug("Custom storage remove Method");

super.remove(publicationId, componentId, componentTemplateId, componentPresentationType);

log.debug("Custom storage remove Method :- "+componentId);

 

}

Re-Publish an item

As you can see when I re-published an item, we have remove method invoked first and then create method. Next, is un-publish an item and see how it works/ in what sequence.

Un-Publish an Item

When we publish a new item only create method is called, re-publishing will call the remove method and then create and finally in un-publish only remove method is called.   

In the last two blogs, we learned how to set up and configure the project to build storage extension and Publishing a new item and in this blog, we saw other functionalities as well and how they are invoked, in what sequence/order, with this approach we can add/update/remove DCPs in custom storage e:g SOLR, ElasticSearch, MongoDB, etc.

This data can further be used for analytics and for third-party applications.

Happy Coding and Keep Sharing !!!

SDL Tridion sites 9 PCA with REACT - Part 2

In the previous post, we saw how to set up the project using Apollo Client, ReactJS and interact with Tridion Sites 9 PCA. We also build a new schema, Dynamic CT and published 3 components using the Dynamic CT in order to retrieve them via PCA (GraphQL).

In the last exercise, we rendered the list of Dynamic News Components on the Landing page. Today we are going to continue using the same code and build the Details page and later on will see the deployment process and how to deploy ReactJs App.

So, let's start with the News details page, we already created the landing page and while doing that we had sufficient information to get the DCP of that particular component. If you have noticed in the code or screenshot from my last blog the Href that I've created for each News and Article items contains the combination of ItemId and CT and we need that same combination to get the Component Presentation.

DCPs with ItemID-CT available on Landing Page

Here are the JSX and Graphql code to render the News details page

News Detail Page

Here is the News and Article Details page again not a very attractive UI 😊.

Details Page

Let's build the App and see how's the production-ready build looks like. The below commands build the deployment package after npm build we need to run serve -s from the build folder and this will spin the Website

 $ npm run build

 $ serve -s

Build Package

Final Output 

Final Build

The updated code is available on GitHub and in the next blog, we will see more features works until then.

Happy Coding and Keep Sharing !!!

SDL Tridion sites 9 PCA with REACT

Tridion sites 9 PCA is getting popular more and more every day, and today in this blog, we will be creating an app using Apollo Client to communicate with SDL Tridion GraphQL API. We will integrate Apollo Client with ReactJS, but you can use it with several other client platforms as well.

Setting Up The Project

To get started we first need to set up a new React project. The easiest way to do so is to use create-react-app. This script creates a new React project.

 npm install -g create-react-app react-graphql  
 cd react-graphql  
 npm start  

with this, you will have the default app up and running on port number 3000, This is initiating a new basic React project in the newly created project folder react-graphql. By using the npm start to command the live-reloading development web server is started and the output of the default React project can be accessed in the browser:

Default ReactJS

In order to work with GraphQL, we have to install Dependencies. The next step is to install the needed dependencies.

• apollo-boost: Package containing everything you need to set up Apollo Client
• react-apollo: View layer integration for React
• graphql-tag: Necessary for parsing your GraphQL queries
• graphql: Also parses your GraphQL queries

The installation of these dependencies can be done by using the following NPM command

 $ npm install apollo-boost react-apollo graphql-tag graphql  

Project Structure 

As you can see I've imported react-apollo in order to work with GraphQL. In today's demo, we will see how to get the Dynamic Component Presentation and reder the same in React based webapp. To start this I've created a new schema with Title and Description as content fields and used the default DXA standard Metadata Schema as well.

Based on this new schema I've created 3 new components and published them using Dynamic CT. They are now available via PCA.

3 DCPs for Demo Purpose

DCPs via GraphiQL

Next, is call PCA using Apollo Client and ReactJS and render the DCPs.

Here is the query to get all the DCPs to render them on the News and Article Landing page.

 const repoQuery = gql`  
  query  
 {  
  componentPresentations(namespaceId: 1, publicationId: 11, filter: {schema: {id: 789}}) {  
   edges {  
    cursor  
    node {  
     itemType  
     rawContent {  
      data  
     }  
    }  
   }  
  }  
 }  
 `  

Based on the query criteria we are getting 3 DCPs which is correct

PCA output

Next, Display the Data

Let's write some JSX to display the fetched data. I'm fetching/rendering the data from both Metadata and Content fields, just to test the feasibility/flexibility and syntax.

 class News extends Component {  
  render() {  
   console.log(this.props)  
   return (  
    <div>  
     <h2>News and Articles Landing Page</h2>   
     {  
      this.props.data.loading === true ? "Loading" :   
       this.props.data.componentPresentations.edges.map  
       (  
        data =>  
       <ul key={data.node.rawContent.data.Id}>  
       <li style={{fontWeight: 'bold'}}>  
         <a href={"newsdetails?ids="+data.node.rawContent.data.Id +  
          "&name="+data.node.rawContent.data.Content.title.replace(/[^a-zA-Z0-9]/g, '-')}>  
          {data.node.rawContent.data.Content.title}  
         </a>  
       </li>  
       <p>  
        {  
         data.node.rawContent.data.Metadata.metadata.description  
        }  
        </p>  
      </ul>  
       )  
     }  
    </div>  
   );  
  }  
 }  

And Finally, our News and Article Landing page with DCPs is ready, not the very attractive UI though 😊 

DCPs Rendering on ReactJS app

In the next blog, we will be creating News details page and will try to implement search and other features as well. 

Part -2 Create News detail page and Production Build

You can download the sample application from GitHub, don't forget to update the PCA URL 

Happy Coding and Keep Sharing !!!!