Copied to clipboard

Flag this post as spam?

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


  • Neil Hodges 338 posts 987 karma points
    Aug 13, 2020 @ 08:37
    Neil Hodges
    0

    Extend Vendr back office Order

    Hi

    Me again :)

    In a Vendr siteI'm building, We collect artwork from the point of someone adding a product to the basket. I've assigned the details of where this artwork is stored as a property against the orderline.

    When the editor logs into Umbraco and finds the completed order, the editor needs to download the .zip file of the artwork.

    I have an API controller that handles that download but wondering if I can extend the Order screen in Vendr to show a link for them to download, it needs to either pass the Order and OrderLine number or the property id of the artwork. Preferably the Order & Orderline Id.

    Previously in TC I could do this and grab the Order & Orderline Ids to pass to my API controller, is this still the case in Vendr?

    If so could you point me in the right direction, I'm looking at App_Plugin > Views > Order > edit.html

    However, I guess this is all angular? and my angular knowledge is rusty, to say the least.

  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Aug 13, 2020 @ 08:55
    Matt Brailsford
    0

    Hey Neil,

    Unfortunately as the back office is all angular now you are going to need to know some in order to extend it.

    I think there are two options for you really.

    1) You could implement an Umbraco Menu Action, "Download Artwork" and inject it into the actions menu for the Order menu item which should then display in the top right menu. From there you could hit your API controller and I think you should know the Order ID. But it would be at the order level and so you would need to download everything, or maybe present them with a dialog that displays the artwork with the Order Line details next to it so they can choose what to download.

    2) In your order.editor.config.js file (ideally, copy of the default one), you can provide a root level view option which can point to a custom angular view file which can replace the edit screen entirely with your own implementation. In that you can copy the original and then modify it how you need it to display a link on the order lines.

    Either way, these are both angular heavy options, but unfortunately there is no way around it.

    We have tried to make the back office UI as flexible as possible with the config file to try and make this level of customization unnecessary most of the time however we can't cover ever option and so that's when we allow you to just take over.

    /Matt

  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Aug 13, 2020 @ 09:11
    Matt Brailsford
    0

    Oh, I have thought of another option, but again it still requires some angular.

    So, for this, you could add your artwork order line property to the properties collection in the order line config (see config options here https://vendr.net/docs/core/1-2-0/key-concepts/order-editor-config/#order-line-config-options), but, set the showInOrderLineSummary to false so it won't show in the order line summary. The property will be present in the editor that opens when you click the order line pencil icon to edit those properties though.

    Well, for that property, you could create a custom property editor and set the properties view config option to point to that editor view and then that would be used to edit that value. Instead of editing the value though, you could instead display a preview and a link to download that artwork which would call your API controller.

    Both the order and the order line are passed to the property editor in $scope.model.config so you should be able to use those to figure out which artwork to display / download.

    I think this might be your simplest option as property editors shouldn't be that complex for you to create (comparatively speaking)

    Matt

  • Neil Hodges 338 posts 987 karma points
    Oct 08, 2020 @ 10:17
    Neil Hodges
    0

    Hi

    So I'm not far off with this, this is the last thing we need to do and then we can launch the site :)

    I have the Order creating the anchor link, Download Artwork, when clicked I need to hit an API controller to return a ZIP folder with the contents of the saved artwork against the order.

    enter image description here

    In my custom property type i have:

    <div ng-controller="ArtworkLinkEditorController">
    <!--<textarea ng-model="model.value"></textarea>-->
    <a href="">Download Artwork</a>
    

    and in my angular controller I have:

    angular.module("umbraco")
        .controller("ArtworkLinkEditorController",
            function () {
                //alert("The controller has landed");
            });
    

    How do I grab the OrderLineId and add it to my anchor link URL? So I can have something like:

    /Umbraco/Api/BackOfficce/GetArtWork?OrderLineId={orderlineId}

  • Neil Hodges 338 posts 987 karma points
    Oct 08, 2020 @ 11:13
    Neil Hodges
    1

    So I've come up with this:

    angular.module("umbraco").controller("ArtworkLinkEditorController", function () {
        //alert("The controller has landed");
        var cfg = $scope.model.config;
        var orId = cfg.orderId;
        var orLineId = cfg.orderLineId;
    
        //get anchor by Id and append URL 
        var url = "/Umbraco/Api/BackOfficce/GetArtWork?OrderId= " + orId + "OrderLineId=" + orLineId;
        var a = document.getElementById('downloadLink');
        a.href = url;
    
    });
    

    I guess there's a better way of binding the Anchor in Angular? As vanilla Javascript doesn't seem to work.

    I have limited knowledge of Angular, I'll keep digging but if anyone has a quick solution on how to bind it that would be great.

  • Matt Brailsford 4124 posts 22215 karma points MVP 9x c-trib
    Oct 08, 2020 @ 11:47
    Matt Brailsford
    100

    Hi Neil

    Yup that’s how you’ll want to get it. To bind it you can add the url property to $scope

    $scope.url = ...
    

    Then it should be available in your view

    <a ng-href=“url”>...</a>
    
  • Neil Hodges 338 posts 987 karma points
    Oct 08, 2020 @ 13:18
    Neil Hodges
    0

    Whoop!!, yep that's got it!

    Cheers, once again Matt. Another Vendr site out the door hopefully by Monday next week :)

Please Sign in or register to post replies

Write your reply to:

Draft