Copied to clipboard

Flag this post as spam?

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


  • Linx 98 posts 258 karma points
    Nov 03, 2021 @ 12:08
    Linx
    0

    Help with HTML page using Umbraco design

    Hi

    I created a custom section and would like to build a new create/edit page so my users can enter and edit data.

    I checked out the documentation at https://our.umbraco.com/apidocs/v8/ui/#/api but I don’t know how to create a standard HTML page containing a few textboxes that are mandatory or introduce an email field?

    I have the below so far but I know how to add a input control but I would like to have a better design to it as well and make the section page feel like an Umbraco page

    <umb-box-header title="this is a title"></umb-box-header>
    
    <umb-box-content>
    
        // Content here
    
    </umb-box-content>
    

    After this I looked at an existing Umbraco page that does something similar to what I want but it was needing a specific AngularJS controller which I couldn’t find the file for, so it didn’t really work. Is there a way I could have the current Umbraco design (CSS, Angular controllers etc) for my pages?

    Could anyone show me an example of how I could carry this out or something over the internet I could look at?

  • Linx 98 posts 258 karma points
    Nov 04, 2021 @ 11:48
    Linx
    0

    Could anyone push me in the right direction?

  • Ambert van Unen 175 posts 817 karma points c-trib
    Nov 04, 2021 @ 15:19
    Ambert van Unen
    0

    Hi Linx,

    If I understand you correctly these links could point you in the right direction: https://our.umbraco.com/documentation/reference/routing/surface-controllers

    @using (Html.BeginUmbracoForm<MyController>("HandleSubmit"))
    {
        <input type="submit" />
    }
    

    and a custom dashboard to load the html/view https://our.umbraco.com/documentation/Extending/Dashboards/

    Hope this helps :-)

  • Linx 98 posts 258 karma points
    Nov 04, 2021 @ 17:27
    Linx
    0

    Hi

    Thanks for that but I don't think it's what I'm after :-(. For example in using AngularJS and what you have provided for Umbraco 8 is MVC? From my research I don't think you can use MVC for a custom section?

    If so I'm just trying to get a basic layout with a few controls but I don't know if there is an easy way to inherit umbracos design and pull them in?

    Please let me know if I've misunderstood you.

  • Kevin Jump 2310 posts 14695 karma points MVP 7x c-trib
    Nov 04, 2021 @ 18:07
    Kevin Jump
    1

    Hi Linx,

    a good starting point for building stuff in the back end is the UIExamples package.

    https://our.umbraco.com/packages/developer-tools/ui-examples/

    this has pages for all the basics , like buttons, tabs, boxes ect and you can use the code to see how you could build your pages.

    the repo also has all the pages in the package so you can browser there as well to see how it all looks without installing the package

    https://github.com/umbraco/UI-Examples/tree/master/src/Our.Umbraco.UiExamples/App_Plugins/uiexamples

  • Linx 98 posts 258 karma points
    Nov 04, 2021 @ 18:20
    Linx
    0

    Hi Kevin

    That really helps! Thanks I will dive into this.

    I will surround my current HTML controls with the found on the package you mentioned.

    Just 2 quick questions if I may:

    I have a TinyMCE control on my custom section HTML page. I have added ng-required and required to the control but it never validates, any thoughts on that? I can post my code if it helps.

    Secondly I've created a custom section. I noticed all files reside under app_plugins folder. When my site is hosted my concern is if someone accidentally follows some logic to get to the HTML page for creating an entry or editing an entry. So far I only have my C# class inheriting another umbraco class (sorry don't recall the name but it's in the tutorials on here) to lock down the data so it only executes if a user is logged in. Is that enough security or are there further steps I need to take?

    Thanks again

Please Sign in or register to post replies

Write your reply to:

Draft