CODEWITHSUNDEEP
javascriptrazorsitecore
troyrmeyer
troyrmeyer

Reputation: 125

Create Sitecore cshtml Rendering for Inserting JavaScript

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>
    }

Upvotes: 1

Views: 1107

Answers (1)

Derek Hunziker
Derek Hunziker

Reputation: 13141

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.

  1. 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.
  2. Create a new View Rendering in Sitecore with it's Path pointed to the location of your .cshtml file.
  3. 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)
  4. 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)
  5. 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.
  6. 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)
}

Upvotes: 2

Related Questions