Rendering order issue with zone defined in a widget

[jptissot]

It is possible to inject html into a zone defined in a widget if this widget with zone is rendered after the widget injecting into this zone. But it is not possible to inject "upwards" into a zone.

Use Case:

We have a HeaderHeroWidget that supports having quick links to content below. The idea was to have a zone defined in the Header Hero widget where other flow wigets could "inject up" a button to link down to them (using some type of smooth scrolling).

So, a user would add the HeaderHeroWidget to the flow, then other widgets below it. Those widgets below would inject a button into the hero widget "links" zone. This does not work. We instead reverted to using javascript to inject the html into the header.

However, if the widgets inject the button into a zone defined in the FooterWidget, it works.

Can this be supported ?

[ns8482e]

@jptissot easy to achieve by defining DisplayDriver that injects custom Shape for Header for your widget e.g. HeaderHeroWidget

[jptissot]

@ns8482e what do you mean ?

[ns8482e]

public class HeaderHeroDriver : ContentDisplayDriver
{
     public override IDisplayResult Display(ContentItem model, IUpdateModel updater)
     {
            if ( model.ContentType != "HeaderHeroWidget" )
                   return null;
             return Dynamic("HeaderHeroWidget_Links", shape =>
            {
                shape.ContentItem = model;
            })
            .Location("Detail", "/Header");
     }
}

Create HeaderHeroWidget.Links.liquid or HeaderHeroWidget.Links.cshtml in Views And Register driver in your module startup.

This will inject HeaderHeroWidget_Links to Header zone of your Layout for every HeaderHeroWidget that you add to the flow

[jptissot]

Will this work if the zone is defined in another widget that is rendered before the widget that injects into said zone ?

[ns8482e]

It should work if Zone is defined using ZoneTagHelper as its using Layout zone. and you have RenderSectionAsync for the zone in Layout

[ns8482e]

Another option that I am using in Templates is to define nested layout like shape describe here.
#3963 (comment)