LAB: Ektron

developer

workshop

Aniel Sud

Sr. Director Development

US R&D

What are we building?

What are we building?

Scenario:

• We are working for a company called Moderna and have been tasked with

revamping the careers page

• Goals:

• Improve performance

• Add Search and Facets capabilities

• Improve maintainability

What are we building?

What are we starting with?

• The site is built on Ektron version 9.1 using Bootstrap

• Built using PageBuilder and custom widgets

• Job openings are stored as SmartForms in a single folder

• The existing architecture is:

• A PageBuilder template at the root of the site called jobs.aspx

• That page is tied to a default layout which contains a single widget in a 12

column Bootstrap dropzone

• The single widget is JobsWidget.ascx

What are we building?

The Jobs Widget is non-configurable and very simple

• It uses the Content Manager to retrieve items in the careers folder

• Deserializes them into an XSD.exe generated class definition called

Smartform.JobPosting.root

• Binds the deserialized list of items to an ASP.net repeater

What are we building?

Why’s that suck?

• The Content Manager is pretty good at getting lists of things to render,

but it does not allow us to filter on fields, aggregate, generate facets, or

anything else very easily

• ASP.net repeaters are kind of clunky to deal with for anything vaguely

complicated

• ASP.net server controls are not compatible with forward looking

technologies like MVC

What are we building?

How will we fix it?

• Start by attaching our site to a Find index and configuring it so our

SmartForm data is inflated for the index

• Enables facets, sorting, search, etc

• Could use Solr for this, but Find is available as a service, so does not require

additional infrastructure. Configuration is easier, API is more fluent

• We’ll rewrite our widget to use Razor templating

• Forward looking technology will ease maintainability, future proof more of

our code

• We’ll add functionality by creating a second widget to display facets

Let’s get started

Hooking up Find

• The Ektron site on your VM has the Find package already installed, but

not configured

• If you were doing this on a clean site, the steps you would need to take:

• Sign up for find at http://find.episerver.com/

• Create a developer index (free)

• Add the nuget.episerver.com repository to Visual Studio

• Install the Ektron.Cms.Find package

Hooking up Find

Lab Section 1

• Add the relevant Find sections to your web.config

• Add the bootstrapper initialization call to your Global.asax

Application_Start

• Modify EktronFindBootStrapper to add custom type mappings and

behaviors

Follow the instructions in your Lab Manual for Section 1

Hooking up Find

You’ll know Find is running properly when you see something like the

following at http://ascendektron.com/episerverfind

Hooking up Find

Errata

• Smartform.JobPosting.root class Generated using XSD

• Limitations on rich text fields

• Type registration

• Including core ContentData fields

• Classes in App_Code means reindexing

Using Razor

templating

Razor templating in widgets

Is it MVC?

• Nah, not MVC

• It does enable us to future-proof a bit though, using Razor views for

rendering data in the same way that MVC does

• Need to remember that WebForms has a “one form to rule them all”

• Postbacks are kind of fundamentally incompatible

Razor templating in widgets

How’s it work?

• We still need a container usercontrol/widget to work with PageBuilder

• We put the controller code in the widget itself so it is subscribed to

lifecycle events

• The widget then passes a viewmodel and the razor template to a base

class that fakes out the MVC stack and renders the results to html

• The widget puts the returned html into a literal and renders it on the

page

Razor templating in widgets

• Specific pieces

• ~/App_Code/CSCode/Ascend/RazorWidget.cs

• The base class we will create for all Razor templated widgets. It will allow us to interact with the widgetHost in order to set the title, and it exposes a method to render a view against a given viewmodel

• ~/widgets/Views/Jobs.cshtml

• The actual razor template used to render against the viewmodel

• ~/widgets/Views/web.config

• Sets default configuration for all cshtml views in Views folder

• ~/widgets/JobsRazor.ascx

• Contains nothing but a literal to output the rendered results

• ~/widgets/JobsRazor.ascx.cs

• Retrieves data from Find and calls base class to render HTML string

Razor templating in widgets

Follow the instructions in your Lab Manual for Section 2

Adding Facets

Facets

• Supported by Solr and Find

• Facets come in different forms

• Range

• Distance (geospatial)

• Terms

• Organizes items into buckets

• Terms – separate into unique string buckets

• Range/Distance – separate into ranged buckets

Facets

• Talking about:

Facets

• Goal:

• Add facets to job search page

• Create a new widget, using Razor widget setup

• Use bootstrap to split the design into a left and right column

• Add new facets widget to right column

Facets

Follow the instructions in your Lab Manual for Section 3

Recap

Recap

In this lab we:

• Utilized the EPiServer Find stack to easily add complex search

capabilities to our site

• Find does not require any additional infrastructure

• Covered an alternative rendering methodology that allows the use of

Razor templates in widgets

• Covered faceting in Find