V13.4.1 I have a single column layout block which has a settings model which happily changes the background colour on the front end web site. However, when attempting to set up a preview, I get the data out ok, but I have no idea how to get the settings data to apply. I tried using the old V11 example site but couldn't really convert it as I didn't understand what the syntax was in the Angular. Does anyone have a simple example of getting a settings model to output to a preview html? Thanks.

I'm using @Kaspar Boel Kjeldsen blockpreview. This is my columnt layout file

csharp
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem<OneColumnLayout, SectionSettings>>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@{
    var backgroundColor = Model.Settings.BackgroundColour;
    var noBackgroundColor = string.IsNullOrEmpty(backgroundColor);
    var hasBrightContrast = Model.Settings.Contrast == "ffffff";
    var cssClass = Model.Settings?.SectionClass;
}
@if (ViewBag.blockPreview != null)
{
    <section class="@cssClass"
        style="background-color:#@backgroundColor"
        @(noBackgroundColor ? "nobackgroundcolor" : null)
        @(hasBrightContrast ? "bright-contrast" : null)>
        @await Html.GetBlockGridItemAreasHtmlAsync(Model)
        @ViewBag.renderGridAreaSlots
    </section>
}
else
{
    var colSpan = ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[0].ColumnSpan;
    <div class="row @cssClass" style="background-color: #@backgroundColor"
        @(noBackgroundColor ? "nobackgroundcolor" : null)
        @(hasBrightContrast ? "bright-contrast" : null)>
        <div class="col-@colSpan">
        @await Html.GetBlockGridItemAreaHtmlAsync(Model, ((Umbraco.Cms.Core.Models.Blocks.BlockGridArea[])Model.Areas)[0].Alias)
        </div>
    </div>
}

Are you trying to change the Angular HTML based on the settings data?

Well, as it's yourself ;), two things, I'm using your BlockPreview package, and as has issues work with layouts I'm rolling my own layout html preview. So I just want to be able to get the values out of the settings model. AND then I don't think the package responds to settings, I may be wrong, but I change settings on an RTE and it changes on the web page but not the back office.

Hmm... if your partial view inherits the settings model properly it should pull everything correctly. Your partial should have something like this at the top of it:

@inherits UmbracoViewPage<BlockGridItem<TContent, TSettings>>

You mean the html file in app_settings should have the @inherits line in it?

Your .cshtml partial view that is being rendered on the front end should have that, that way the settings are picked up from the strongly typed model

Yes, it has that and it's working fine. It's the preview file that I'm having issues with. I'll have a go with your original suggestion

block.settingsData.myPropName

and see what happens. Thanks.

If you're not using the BlockPreview html file you'll have to do it that way in the Angular preview, otherwise

block-preview.html

should handle that for you

The blockpreview package causes issues on layouts, see my issue 60 😉

I commented on that issue this morning 😁 long story short that's Umbraco default functionality and not specific to BlockPreview

It precludes using the package for layouts though if you can't put anything in them, lol

I know, something to raise on the Umbraco issue tracker if you think it's necessary! You can get the inline add button to appear above and below any existing blocks

Yes, but as I've just restated in the issue, you can't add anything into the blocks. If you use the little roundels the item you add is then outside the layout block. Then you can't get it inside even in Sort Mode.

If you're rolling your own Angular preview, in theory it should be as straightforward as:

html
<div ng-style="{'background-color: '#' + block.settingsData.backgroundColourProperty.value}"></div>