Content Mashup as Component Link

You may already have seen the concept of doing content mashup using Tridion Sites Connector. If not you can check this blog from Manish to get an idea. Today I am going to share another way to do that between Sites and Docs.

Assume you have maintained all of your products on sites and you want to add a product specification (Topic) from Docs along with that.

Using sites connector is one of the options for that. But there is another way to achieve it using a component link.

Here is the approach for that –

I have segregated the implementation in 2 parts.

First Part-

  1. I have created an MVC application (Not Mandatory, you can use ASP.Net application as well) to connect the Tridion Docs using service API and retrieve all the topics/publications from DOCS Content Manager and bind the result in a grid view.
    • Here is the code to get all the Topics/Publication using DOCS service API

         To retrieve the Topics:

public static List<Topic> ReadTopicsFromDocs(InfoShareWSHelper infoShareWsHelper)
{
List<Topic> topics = new List<Topic>();

//build a object of GetDocumentObj25Channel to retrieve the topics
var object25Channel = infoShareWsHelper.GetDocumentObj25Channel();

//define metadata wants to retrieve
string ishMeta =
"<ishfields>" +
"<ishfield name='FTITLE' level='logical'/>" +
"<ishfield name='FAUTHOR' level='lng'/>" +
"<ishfield name='FSTATUS' level='lng'/>" +
"</ishfields>";

//call Find() method to bring that data back from the DOCS environment
string obj = object25Channel.Find(ISHType.ISHModule.ToString(), StatusFilter.ISHNoStatusFilter, "", ishMeta);

topics = BindTopic(obj);
return topics;
}

 

         To retrieve the Publications:

 public static List<Publication> ReadPublicationFromDocs(InfoShareWSHelper infoShareWsHelper)
{
List<Publication> publications = new List<Publication>();

//Build a object of GetPublication25Channel to retrieve the publications
var object25Channel = infoShareWsHelper.GetPublication25Channel();

//define metadata wants to retrieve
string ishMeta =
"<ishfields>" +
"<ishfield name='FTITLE' level='logical'/>" +
"<ishfield name='MODIFIED-ON' level='lng'/>" +
"<ishfield name='FSTATUS' level='lng'/>" +
"<ishfield name='FISHPUBLICATIONTYPE' level='logical'/>" +
"</ishfields>";
string obj = object25Channel.Find(StatusFilter.ISHNoStatusFilter, "", ishMeta);
publications = BindPublication(obj);
return publications;
}

  1. Deploy the application on the web server and run it. Here are the look and feel of the application



  2. As you can see in the screenshot, there is an option to choose the item and click on the button ("Add To CMS") to add it to Tridion CMS. In a nutshell, the functionality is once the user clicks on that button the GUID of that selected topic/publication will be added as a link. For that, you need to add below necessary javascript on the view.

    • Here is the Javascript I am using to add that 

      $(document).ready(function () {
      $('#topic_table').DataTable();
      });

      $('input:checkbox').change(function () {
      $('input:checkbox').not(this).prop('checked', false);
      });

      $('#btnCreateAsset').click(function (event) {
      var topicId;
      $.each($("input[name='selectCheckBox']:checked"), function () {
      topicId = $(this).attr('id');
      });
      if (topicId != null) {
      alert("You Have Selected: " + topicId);
      var fields = window.dialogArguments.getFields();
      if (fields && fields.length > 0) {
      fields[0].setValues([topicId]);
      }
      }
      else {
      alert("Select a Topic First")
      }

      });


  3. Now bind this URL with your schema field so that you can use it as Custom URL extension. ( If you are not familiar with custom URL extension, there is a nice blog on this from Neetesh Narvaria. You can follow this as a starting point.)

We have finished all the required step to mashup the content from the Tridion CMS side.

Second Part-

In this section, I will explain how to retrieve the actual content from DOCS based on that GUID using CPA on the web application end.

I am using SDL DXA on the web application side so I try to utilize the existing methods to retrieve the data.

  1. First I have added an InputItemFilter to pass that GUID as InputCustomMetaCriteria. Here is the code snippet for that -

    InputItemFilter finelFilterCriteria = new InputItemFilter{
    CustomMeta = new InputCustomMetaCriteria
    {
    Key = Constants.PublicationID,
    Value = query.DocsPublicationID,
    Scope = CriteriaScope.Publication
    }
    };

  2. Once InputItemFilter criteria are ready to use, call the Graphql client and call ExecuteItemQuery() method using the necessary parameter to get the result -

    var client = ApiClientFactory.Instance.CreateClient();
    var results = client.ExecuteItemQuery(filter, null, new Pagination{First = pageSize,After = queryParams.Cursor}, null, ContentIncludeMode.Exclude, false, null);

    That’s all. Hope you like it. Happy coding. Here is the source code of Custom Application.