Copied to clipboard

Flag this post as spam?

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


  • Kevp 8 posts 98 karma points
    May 23, 2020 @ 19:03
    Kevp
    0

    Get data from MultiURL picker in nested content element

    Hi,

    I've used Umbraco as an editor for a while now. Just now i'm making my first attempts to set up my own umbraco site based on insights i've gained in making and editing pages. I'm a ux/ui designer by nature and in relation to umbraco and coding i'm a complete noob.

    I'm using V8 with the doctype grideditor package.

    I've created 'infoBlock' an element doctype consisting of couple of other compositions. (Caption, Image and Call to action). Up till now all the basics have worked out (images, description etc).

    I created a doctype composition which i use in the infoblock 'callToActionComposition' which is a nested content picker enabeling me to select a buttoncolor, style and add a link to it through the 'multi url picker'.

    The structure in relation to aliases is like this:

    infoBlock (element) < callToAction (element) < callToActionComposition < callToActionLink (Multi URL picker)

    I'm struggeling to get the link implemented in my partial. I tried different approaches suggested in documentation but i presume the nested content nature of my solution deviates too much from any example i encounter.

    This is the callToActionComposition

    This is how it's implemented in the infoblock

    This is how it shows in my content editor, and it's exactly how i would want to use it...

                            @{
                            var links = Model.Value<IEnumerable<IPublishedElement>>("callToActionComposition");
                            if (links.Any()) {
                                <div class="cta-wrapper">
                                    @foreach (var callToActionLink in callToActionComposition) {
                                        <a class="btn @Model.Value("callToActionColor") @Model.Value("callToActionSize")" href="@linkUrl"></a>
                                    }
                                </div>
                            }
                        }
    

    This is how i try to call it in my partial, i know it's probably completely off but i'm kind off lost. A the top i'm using @inherits UmbracoViewPage

    I tried using Model.Value<>>("callToActionComposition"); and lots of other variations as i am lost due how to reach that variable and build a sufficient expression to fit my needs.

    Any help would be kindly appreciated.

  • Joep 70 posts 469 karma points
    May 25, 2020 @ 19:30
    Joep
    100

    Hi,

    I would recommend using the models builder to make it easier to call the values of a model : https://our.umbraco.com/documentation/reference/templating/modelsbuilder/.

    Once setup you can set @model {Namespace}.InfoBlock at the top of your view and you can then just call Model.CallToAction to get access to your NestedContent items.

    After that you would most likely want to loop through the items by making them typed, so you can also easily call the properties here.

     @Model InfoBlock
    @{
                            if (Model.CallToAction.Any()) {
                                <div class="cta-wrapper">
                                    @foreach (var ctaLink in Model.CallToAction.OfType<CallToActionComposition>()) {
                                        <a class="btn @ctaLink.CallToActionColor @ctaLink.CallToActionSize" href="@ctaLink.callToActionLink"></a>
                                    }
                                </div>
                            }
                        }
    

    The @cta.CallToActionLink will only work if you have the MultiUrlPicker set to max 1 item. (the property won't be generated as a list then).

    If you need anymore help, let me know!

    -Joep

  • Kevp 8 posts 98 karma points
    May 27, 2020 @ 15:38
    Kevp
    0

    Hi Joep,

    Big up for the reply and the help, thanks man.

    In webconfig these were turned on by default or by installing the doctype grid editor package:

    <add key="Umbraco.ModelsBuilder.Enable" value="true" /> <add key="Umbraco.ModelsBuilder.ModelsMode" value="PureLive" />
    

    After reading through the documentation to my best understanding i guess these are the correct settings for what i'm trying to do.

    I can't grasp what i should provide in the {namespace}, i presumed it was

    @model UmbracoViewPage<IPublishedElement>.infoblock
    

    Although it returns, a by now familiar: 'The type or namespace name 'infoblock' does not exist..."

    Google wasn't my friend on this one, tried some other options but can't seem to find which one i should use...

    Could you please clarify how i should approach it ?

  • Kevp 8 posts 98 karma points
    May 27, 2020 @ 16:03
    Kevp
    0

    Just noticed a namespace mention on the settings/modelbuilder page in the backend.

    Models namespace is Umbraco.Web.PublishedModels.

    Tried: @model Umbraco.Web.PublishedModels.infoblock

    But same result: The type or namespace name 'infoblock' does not exist in...

  • Kevp 8 posts 98 karma points
    May 27, 2020 @ 16:20
    Kevp
    0

    Hey Joep,

    Following up after some trial and error... I always presumed i had to use the exact alias which umbraco generates.

    In my case they are: infoblock, callToActionColor, callToActionSize and so on...

    As far as i can grasp 'weirdly enough" it works with:

    @model Umbraco.Web.PublishedModels.Infoblock
    

    and

                            if (Model.CallToAction.Any()) {
                            <div class="cta-wrapper">
                                @foreach (var callToActionLink in Model.CallToAction.OfType<CallToActionComposition>()) {
                                    <a class="btn @callToActionLink.CallToActionColor @callToActionLink.CallToActionSize" href="@callToActionLink.CallToActionLink"></a>
                                }
                            </div>
                        }
    

    Almost exactly like you suggested. How come the casing on these is different than the alias ?

    Anyhow, you helped me out a lot man, thanks!

  • Kevp 8 posts 98 karma points
    May 27, 2020 @ 16:59
    Kevp
    0

    Hi Joep,

    The cta's currently get generated like this:

    <a class="btn btn-outline-secondary btn-lg" href="Umbraco.Web.Models.Link"></a>
    

    The MultiUrlPicker is set to max 1

    I suppose i'll have to approach this differently to get the title, target and url ?

    This is what i currenlty have in my partial after some additional parms and renames:

                  @{
                        if (Model.CallToAction.Any()) {
                            <div class="cta-wrapper">
                                @foreach (var callToActionLinks in Model.CallToAction.OfType<CallToActionComposition>()) {
                                    <a class="btn btn-@callToActionLinks.CallToActionStyle@callToActionLinks.CallToActionColor @callToActionLinks.CallToActionSize" href="@callToActionLinks.CallToActionLink"></a>
                                }
                            </div>
                        }
                    }
    
  • Joep 70 posts 469 karma points
    May 27, 2020 @ 17:01
    Joep
    1

    Hi,

    It should be @callToActionLinks.CallToActionLink.Url

    And for the link name you van add @callToActionLinks.CallToActionLink.Name

    -Joep

  • Kevp 8 posts 98 karma points
    May 27, 2020 @ 17:04
    Kevp
    0

    Was trying with .Link.Url... After checking the MultiURLPicker docs.

    Stupid mistake!

    You're the man Joep! Thanks a lot!

Please Sign in or register to post replies

Write your reply to:

Draft