Copied to clipboard

Flag this post as spam?

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


  • Arun P K 11 posts 72 karma points
    Feb 10, 2017 @ 18:11
    Arun P K
    0

    Access Multilevel HTML views in Custom Dashboard

    Hi,

    I am working on a package and below are the alias of my custom package:
    Custom Section : "DynamicForms"
    Custom Tree : "Forms"
    Plugin Controller : "DynamicForms"

    My App_Plugins folder structure is as follows
    ----[App_Plugins]
    ------ [DynamicForms]
    ------------[Backoffice]
    -----------------[Forms]
    ---------------------Overview.html
    ---------------------[Form]
    --------------------------Edit.html
    --------------------------Settings.html
    --------------------------Entries.html

    I have tree node when I click on it I am setting my route path to "DynamicForms/Forms/Overview/all" i.e. of format CustomSectionAlias/CustomTreeAlias/HTMLViewName/ID and loading the view in my dashboard(Overview.html). In this dashboard I am trying to add a link, which should be opening "App_Plugins/DynamicForms/Backoffice/Forms/Form/Edit.html" upon click of the link.

    Could anyone guide me whats the necessary syntax for accessing the Sub-folder level files in Umbraco and is it achievable. Should I be pointing to a specific Route or should I handle that through angular to load a different dashboard view.

    Thanks in advance.. :)

    Regards,
    Arun P K

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Feb 10, 2017 @ 18:41
    Nicholas Westby
    0

    This shows how to mark a tree node as activated (which you can do on page load, such as from the Angular controller of one of your directives): https://github.com/rhythmagency/formulate/blob/3849e4ad1cbbde880c8c1988b53b1450a2882d10/src/formulate.app/JavaScript/Services/formulateTrees.js#L31

    As far as creating a link to a given tree node, you could probably just click that tree node, then see what the URL looks like and construct an anchor tag that navigates to that URL. Portions of that URL may be dynamic.

    For example, if I click on this folder:

    Folder

    The URL is http://dev.mysite.com/umbraco/#/formulate/formulate/editFolder/dadf036c49af4dfdae3988ad53e7047d

    And when I click on the form under it, as in this case:

    Form

    The URL becomes: http://dev.mysite.com/umbraco/#/formulate/formulate/editForm/a6ea420edd2a4d24a0bbf6f3ec8789a3

    In my case, the ID's are for the folder and the form (each has their own GUID that uniquely identifies them).

  • Arun P K 11 posts 72 karma points
    Feb 11, 2017 @ 05:22
    Arun P K
    0

    Thanks Nicholas for your quick reply, I am able to work with Tree Node links. I am stuck at a point where I am clicking on a Tree Node called as Forms, on click of which I load a html view on the right hand side Overview.html.

    In my Overview.html I have a link (anchor tag) which I am trying to hyperlink to App_Plugins/DynamicForms/Backoffice/Forms/Form/Edit.html so here I am trying to traverse two folders [Forms] and [Form] to access Edit.html view. On click of the link I want the dashboard to be changed to the view one in the above url.

    I am trying to do a internal linking of different htmlview of dashboard region.

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Feb 13, 2017 @ 01:43
    Nicholas Westby
    100

    Is there any reason your three HTML files need to live under the "Form" folder. Instead, could you file system be structure like this:

    ----[App_Plugins]
    ------ [DynamicForms]
    ------------[Backoffice]
    -----------------[Forms]
    ---------------------Overview.html
    ---------------------Edit.html
    ---------------------Settings.html
    ---------------------Entries.html
    

    That way, you could simply link to each view like this:

    • /umbraco/#/dynamicforms/forms/edit/page
    • /umbraco/#/dynamicforms/forms/settings/page
    • /umbraco/#/dynamicforms/forms/entries/page

    Not sure if those paths are exactly correct, but you get the idea. The "page" part at the end is just a dummy value because an ID is necessary.

    I'm not sure if subfolders are possible, so unless you need subfolders for some reason it might be easier to simply avoid them.

    Alternatively, there are probably hacky ways to do something similar. For example, if you treat the "ID" portion of the URL as a partial path, you could use Angular to include the HTML file: http://www.w3schools.com/angular/angular_includes.asp

    In other words, the URL could be:

    /umbraco/#/dynamicforms/forms/overview/settings

    The "ID" in that case is "settings". If you extract that ID, then store it to the scope as "pathPartial", you could then display it like so:

    <div ng-include="'/App_Plugins/DynamicForms/backoffice/Forms/form/{{pathPartial}}.html'"></div>
    

    At least, I am guessing you could do that. I haven't tried it myself.

  • Arun P K 11 posts 72 karma points
    Feb 13, 2017 @ 08:18
    Arun P K
    0

    Thanks Nicholas, I will try with ng-include approach if it gives me good result will let you know about my progress with it.

    Thanks,
    Arun P K

Please Sign in or register to post replies

Write your reply to:

Draft