World is now on Opti ID! Learn more

K Khan
May 4, 2015
  3660
(3 votes)

Add value with widgets

Extending EPiServer for editors was never so easy untill we have widgets. Given below example will show you how and will encourage you to use widgets to add value for Editors. In Commerce sites usually Products data comes from outside of the EPiServer (e.g. XML via FTP/PIM). Integration services imports the products and variants, Editors work with those products and publish when ready. Editors want to reach with a smallest rout to products not published yet, products with missing images, products without variants, products with zero prices etc. In this example Widget It will show a list of products, those have not been published yet and editors requires some editing. Marketers can come with there own enviornment (Online center Catalog UI give a lot but not enough).

As a developer you may need to learn how to use Dojo if you are not already familiar, it looks scary in start but very powerful.

1. Create a component

[Component(Title = "Products not published yet",
        PlugInAreas = PlugInArea.Assets, 
        Categories = "cms,commerce",
        WidgetType = "xyz.components.ProductsNotPublishedYet", Description = "Display the list of produts not published yet.")]
    public class ProductsNotPublishedYet
    {        
    }

2. Add configuration in module.config

<?xml version="1.0" encoding="utf-8"?>
<module> 
<dojoModules>
<add name="xyz" path="Scripts" />
</dojoModules>
</module>

3. Add Dojo

ClientResources/Scripts/components/ProductsNotPublishedYet.js

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin"
], function (
    declare,
    _WidgetBase,
    _TemplatedMixin
) {
    return declare("xyz.components.ProductsNotPublishedYet",
        [_WidgetBase, _TemplatedMixin], {
            templateString: dojo.cache("/ProductsComponents/NotPublished/")
        });
});


4. Add business logic - Controller Class

[Authorize(Roles = "WebEditor, WebAdmins, Administrators")]
    public class ProductsComponentsController : Controller
    {
        /// <summary>
        /// Gets the list of Unpublished Products
        /// </summary>
        private IEnumerable<ProductContent> Products
        {
            get
            {
                return SearchClient.Instance.Search<ProductContent>().Filter(x => !x.Status.Match(VersionStatus.Published)).GetContentResult().ToList();
            }
        }
        /// <summary>
        /// Product not published yet
        /// </summary>
        /// <returns>Action Result</returns>
        public ActionResult NotPublished()
        {            
            return this.PartialView("/Views/Components/NotPublished.cshtml", this.Products);
        }
    }

Views/Components/NotPublished.cshtml

@model IEnumerable<EPiServer.Commerce.Catalog.ContentTypes.ProductContent>
<div>
    @if(Model.Count() > 0)
    {
        <table>
        @Html.DisplayForModel()
        </table>
    }else
    {
        @Html.DisplayText("There is no unpublished product.")
    }
</div> 

Views/Shared/Display Templates/ProductContent.cshtml

@model EPiServer.Commerce.Catalog.ContentTypes.ProductContent
<tr><td> @Html.DisplayFor(x=> x.Code)</td><td><a href="@EPiServer.Editor.PageEditing.GetEditUrl(Model.ContentLink)">@Html.DisplayFor(x=> x.Name)</a></td></tr>

A Valuable gadget is ready to help Editors in just couple of hours where Editor can view products that have not been published yet and on clicking the link, will take them to Edit page.

Image productsnotpublishedyet.JPG

If you are still not sure how to create a widget, read here. BrilliantCut is a step forawrd to help editors.

May 04, 2015

Comments

May 5, 2015 05:17 PM

Great simple example that I can see real customers using!

nitin anand
nitin anand Jun 15, 2018 01:22 PM

This is what i exactly needed to start with my custom widget. thanks

nitin anand
nitin anand Jun 21, 2018 10:21 AM

You have any example that shows recently edited content by a logged in editor/user? would really appreciate

K Khan
K Khan Jun 21, 2018 12:46 PM

Interesting, never tried this before, but https://world.episerver.com/documentation/developer-guides/CMS/logging/activity-logging/ can help

nitin anand
nitin anand Jul 26, 2018 09:53 AM

Thanks Khan, activity loggning helped in my case as well.

Please login to comment.
Latest blogs
Commerce 14.41 delisted from Nuget feed

We have decided to delist version 14.41 of the Commerce packages as we have discovered a bug that prevents current carts to be saved into...

Shahrukh Ikhtear | Jul 8, 2025

How Optimizely SaaS CMS Isn’t Just Another Commodity

CMS platforms these days are becoming commoditised. The modelling of most systems lends itself to automation. Giving marketers more flexibility wit...

Chuhukon | Jul 4, 2025 |

How to Set Up CI/CD Pipeline for Optimizely Frontend Hosting Using GitHub Actions

As I promised in my previous blog post about getting started with Optimizely Frontend Hosting, today I’m delivering on that promise by sharing how ...

Szymon Uryga | Jul 2, 2025

Environment-specific badges in the Optimizely CMS

Step 1: Add Environment Info to the UI Create a custom UIDescriptor and a ComponentDefinition to inject a badge into the CMS UI. using EPiServer.Sh...

Rajveer Singh | Jul 1, 2025