Visualize Published Environment in the Tridion GUI
Updated: Aug 27, 2019
Happy New Year!! This is my first blog of the year and I am planning to share one of the coolest features of Tridion.
I have seen most of the editors are very keen to visualize to which target items are published. 2 years back I had created a GUI extension using Alchemy framework for that. If you want to know more about the plugin, then you can refer this blog. Below are the drawback of that plugin -
It binds the result in popup window, so comparing the result with Tridion list item is little challenging for user.Sorting or filtering functionality is not there.Customer hesitate to install Alchemy on production environment.
So this time I try to make it in such a way, that it becomes easier for users as well as for customer. To do that I have used DataExtender, which allows to add custom column into the default Tridion List View for all users. In this example I will provide a working solution for that.
Here is a Video Tutorial for the same -
Well, DataExtenders are special type of GUI Extension or I would prefer to say it is extended version of GUI Extension to modify the Response and inject custom data into it.
In this tutorial I will try to cover below topics -
Create DataExtender Class.
Create DataExtender Configuration File.
Create DataExtender Class :
Create .NET class library project and extends the DataExtender class.
Includes the following namespace located under /web/WebUI/WebRoot/bin/ folder Web.UI.Core
Includes the following namespace located under /web/WebUI/WebRoot/bin/ folder Tridion.ContentManagerWeb.UI.Core.Extensibility
Override the ProcessRequestmethod, which handles request. The ProcessResponse class is the main entry point for the DataExtender. Here we have used only GetList and this will help us to filtering out other requests and only listening to the list view. ProcessPublishedContext is the main custom method under which we will implement the logic.
Decorate ProcessPublishedContext method to copy the response XML and add the additional item into the list (To find the logic you can refer this). Below is the relevant part of the method, where it actually gets added into that
Create DataExtender Configuration File :
Let’s concentrate on the DataExtender Configuration file -
Add a config file to the project and named it as DataExtender.config .
Navigating to the <ext:dataextenders> section. Add the Data Extender by adding a new ext:dataextender element in this section:
PublishedEnvironmentDataExtender.PublishedEnvironment ClassName PublishedEnvironmentDataExtender AssemblyName I set the critical attribute to true, so that in case of any issue in the DataExtender code it should get redirected to an error page. You can also ignore the issue and load the normal GUI without DataExtender. For that you need to explicitly set it to false.
Navigate to <ext:lists> section. Inside this section, create or find an <ext:add> element.<ext:extension name="PublishedToColumnExtender" assignid="PublishedToColumnExtenderID">
This config introduces a new column with a unique identifier and fills it the data indicated by the XPath expression in the selector attribute. In case of any issue, You can refer this config and decorate your configuration file accordingly.
Deployment Procedure :
Download the code from here or you can create it by following the above mentioned steps and compile it.
Copy files from the VS output folder (/bin/Debug) to the CMS Server at <Tridion-Home>/web/WebUI/WebRoot/bin.
Create a new Folder on the CMS server for your DataExtender GUI Extension.
Copy the DataExtender.config file to the folder
Add the DataExtender config location to the System.config file in <Tridion-Home>\web\WebUI\WebRoot\Configuration\System.config.
**Note : DLL Files for DataExtender to be deployed under <Tridion-Home>/web/WebUI/WebRoot/bin folder
That it. Hope you like it.