Copied to clipboard

Flag this post as spam?

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


  • Manish Prajapati 4 posts 34 karma points
    Aug 10, 2020 @ 11:15
    Manish Prajapati
    0

    How to add templateUrl for custom dashboard directive?

    Hi All,

    I have created custom plugin in v8 for the custom dashboard and which is working fine. Now, I have create directive and use into the plugin which I had created. If I define inline template in directive then it works fine. But the problem is that when I define my template in a separate html file and add the file path in templateUrl so I am getting 404. In package.manifest, how to add the directive template url "section-create.directive.html"?

    {
    "dashboards": [
    {
      "alias": "My Section",
      "sections": [ "content" ],
      "weight": 4,
      "view": "~/App_Plugins/Section/section.html"
    }
    ],
    "javascript": [
    "~/App_Plugins/Section/section.controller.js",
    "~/App_Plugins/Section/section-create.directive.js",
      ],
    "css": [
    "~/App_Plugins/Section/section.css
    ]
    }
    
  • Vinícius Reif Biavatti 2 posts 71 karma points
    Jun 17, 2021 @ 09:42
    Vinícius Reif Biavatti
    0

    Hi, thanks for you post in the forum!

    Umbraco needs the javascript content defined in package.manifest to inject these references in the main HTML file, like index.html. So, you have to consider this location to make your import in the directive/component, not the relative location (current location of your JS file). To solve this easily, the path to the Application folder can be found stored in a Umbraco's variable. The variable is:

    Umbraco.Sys.ServerVariables.application.applicationPath
    

    From this location, you can access the App_Plugins folder and find your template HTML file. For example:

    angular.module("umbraco").directive("myDirective", {
        templateUrl: Umbraco.Sys.ServerVariables.application.applicationPath + "App_Plugins/my-plugin/component/example.html",
        scope: { ... }
    });
    

    I hope this will help you. Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft