Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Hayden 32 posts 169 karma points
    Feb 09, 2017 @ 01:35
    Hayden
    1

    Export child items when viewing a node (Export as Excel / CSV)

    Hey,

    I was wondering how I could go about making a simple backoffice extenstion that allows you to export all of the child items into a excel document..

    http://i.imgur.com/gWVQ8eI.png?1

    Thinking another option in here which shows "Export as CSV" or something along those lines.

    Then when pressed it exports the data and downloads it.

    Cheers, Hayden

  • Steven Harland 78 posts 495 karma points c-trib
    Feb 15, 2017 @ 12:09
    Steven Harland
    2

    Hi Hayden,

    Here's you might extend the Hybrid Framework to allow news items to be exported as a CSV.

    First create a backoffice controller which generates the CSV file:

    using System.IO;
    using System.Net;
    using System.Net.Http;
    using System.Net.Http.Headers;
    using System.Web.Http;
    using CsvHelper;
    using Umbraco.Extensions.Models.Generated;
    using Umbraco.Web;
    using Umbraco.Web.WebApi;
    
    namespace Umbraco.Extensions.Controllers.WebAPI
    {
        public class NewsItemExportController : UmbracoAuthorizedApiController
        {
            [HttpGet]
            public HttpResponseMessage Export()
            {
                // Get content models from Umbraco
                var newsItems = Umbraco.TypedContentAtRoot().DescendantsOrSelf<Newsitem>();
    
                // Write CSV
                var stringWriter = new StringWriter();
                var csvWriter = new CsvWriter(stringWriter);
                csvWriter.WriteRecords(newsItems);
    
                // Return file response
                var response = new HttpResponseMessage(HttpStatusCode.OK)
                {
                    Content = new StringContent(stringWriter.ToString())
                };
                response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/csv");
                response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
                {
                    FileName = "NewsItems.csv"
                };
    
                return response;
            }
        }
    }
    

    To keep things simple I'm just writing the content models directly to a CSV. I'm using CsvHelper which has a ton of options if you want to do something more complicated.

    This method will be available at this URL: /Umbraco/Backoffice/Api/NewsItemExport/Export.

    Next create an event handler which adds the export option to the menu for the news parent node:

    using Umbraco.Core;
    using Umbraco.Web.Models.Trees;
    using Umbraco.Web.Trees;
    
    namespace Umbraco.Extensions.Events
    {
        public class TreeEvents : ApplicationEventHandler
        {
            protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication,
                ApplicationContext applicationContext)
            {
                TreeControllerBase.MenuRendering += ContentTreeController_MenuRendering;
            }
    
            private void ContentTreeController_MenuRendering(TreeControllerBase sender, MenuRenderingEventArgs e)
            {
                // Only display export option on News node
                if (e.NodeId == "1063")
                {
                    var item = new MenuItem("exportCsv", "Export Children as CSV");
                    item.AdditionalData.Add("actionView", "/App_Plugins/NewsItemExport/index.html");
                    item.Icon = "save";
                    e.Menu.Items.Insert(e.Menu.Items.Count, item);
                }
            }
        }
    }
    

    When this menu item is selected it will open the view at /App_Plugins/NewsItemExport/index.html so we need to create that:

    <div class="umbracoDialog umb-dialog">
        <p>Click <em>export</em> to download a CSV of all news items.</p>
    
        <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
            <a href="/Umbraco/Backoffice/Api/NewsItemExport/Export" target="_blank" class="btn btn-primary">
                Export
            </a>
        </div>
    </div>
    

    It's extremely simple with just some text and a download button. The button links directly to the controller action above so no need for any JavaScript.

    Hope this helps.

    Steven

Please Sign in or register to post replies

Write your reply to:

Draft