Create Sitecore cshtml Rendering for Inserting JavaScript

Question

I need to create a cshtml rendering and Sitecore control that allows me to insert JavaScript from a Sitecore field. I can then attach this control to the layout to insert the JavaScript on the page.

I tried inserting <script> into a control that uses a rich text editor, but Sitecore strips out <script> from the editor by default, which led me to this solution.

I know the basics--there needs to be the cshtml rendering, a template (assuming one field only, a multiline text field), and a layout rendering with the path to the cshtml file, but not much more than that.

The developers have used Glass Mapper, I don't know how that plays into the above, or how to re-instance this. This will be my first control. Here's a sample cshtml file if it helps:

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Company.Model.TDS.sitecore.templates.User_Defined.Company.Platform.Modules.Common.Sidebar_Text_Callout>

    @if (Model != null)
    {
        <div class="sidebar-text-callout">
            <h3>@Editable(Model, x => x.Sidebar_Callout_Title)</h3>
            <p>@Editable(Model, x => x.Sidebar_Callout_Copy)</p>
            @if (Model.Sidebar_Callout_Link != null)
            {
                <div class="all-caps-callout">
                    <a class="link-with-icon" href="@Model.Sidebar_Callout_Link.Url" target="@Model.Sidebar_Callout_Link.Target">@Model.Sidebar_Callout_Link.Text <span class="svg">@Html.Partial("~/Views/Icons/arrowRight.cshtml")</span></a>
                </div>
            }
        </div>
    }

Derek Hunziker · Accepted Answer · 2016-09-30 20:56:41Z

Judging by the model's namespace in the example code you provided, it looks like your developers used TDS along with it's code generation feature to generate the Sidebar_Text_Callout class.

I would recommend that you stick with the same process for creating your JavaScript rendering. The instructions for creating a Glass-based View Rendering are too broad to cover in this context, so instead i've included some high-level steps below. The Glass website as well as Sitecore's own documentation should cover this in more detail.

Create the Data Template containing the multi-line text field. Ensure that the "shared" checkbox is checked on the field if you want the script to be the same across all languages (or enable fallbacks). Otherwise, leave shared unchecked or don't configure fallbacks.
Create a new View Rendering in Sitecore with it's Path pointed to the location of your .cshtml file.
Set the View Renderings "Datasource Template" field to your new template, and configure the remaining fields. Of particular importance will be the Datasource Location (i.e. where you want to store the datasource items), Caching (you'll probably want to check Cacheable and Vary By Data at minimum)
Add the View Rendering as an "Allowed Control" to a placeholder if you want authors to be able to insert it via the Experience Editor (NOTE: because this is JavaScript, you may choose to skip this skip this step)
Right-click your master TDS project and select "Sync with Sitecore". You should see the new Tempalte, Layout, and any other changes you've made. Use the sync buttons to pull these changes into TDS. This process should generate the new Glass Mapper model for you automatically, which you can begin using immediately in the View.
Finally, in your View, reference the new Model and output the field's value. Since we are rendering JavaScript, you may need to output the raw value without Experience Editor support.

Example View

@inherits Glass.Mapper.Sc.Web.Mvc.GlassView<Company.Model.TDS.sitecore.templates.User_Defined.Company.Platform.Modules.Common.PageLevelJavaScript>

@if (Model != null)
{
    @Html.Raw(Model.MyJavaScriptField)
}

Thanks for the detailed explanation Derek, one thing I didn't mention which will change your answer--there are two solution files for our solution, one with and one without TDS. Because I don't have a TDS license (yet), I'm using the solution without it, so am a little lost with #5 and how to do it without TDS.

Collectives™ on Stack Overflow

Create Sitecore cshtml Rendering for Inserting JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related