Try our conversational search powered by Generative AI!

K Khan
May 4, 2015
  3261
(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
Join the Content Recommendations Work Smarter webinar May 8th 16.00-16.45 CET with expert Aidan Swain

Learn more about Content Recommendations, with Optimizely’s very own Senior Solutions consultant, Aidan Swain . He will discuss best practices and...

Karen McDougall | Apr 12, 2024

Plugin for Identifying and Bulk Deleting Orphaned Missing Properties in Optimizely

I am aware that the Optimizely World community has extensively discussed this topic, with numerous solutions and code snippets available to help...

Adnan Zameer | Apr 11, 2024 | Syndicated blog

Enhancing the Authoring Experience: Extending the LinkItem

The LinkItem field is one of the most demanded properties by the community, allowing editors to effortlessly create and manage links across pages a...

Santiago Morla | Apr 10, 2024 | Syndicated blog

The distinctions between Optimizely Web Experimentation and Optimizely Feature Experimentation

This blog is part of the series - Unlocking the Power of Experimentation: A Marketer's Insight. Let’s dive into Optimizely's powerful experimentati...

Holly Quilter | Apr 9, 2024