Skip to main content
Logo
There is a newer version of Contensis. Click to find out more and download the latest version.

Propertied Razor views

Razor views allow you to have properties set on them at page level. When dragging in a Razor view into a page or template you can right click to view the properties just like with web controls.

Creating a Razor view

  1. Create a new Razor view, navigate to the Configuration tab.
  2. Enter your XML for your properties into this tab. Enter your usual Razor view code into the Content tab.
  3. Submit & Approve the Razor view.
  4. You will then be able to use the Razor view in your pages. As well as dragging in the Razor view from the Project Explorer window you can also insert them from the Insert Webcontrol window.
  5. To see the properties, right click on the blue pill with the name of your razor view and select Webcontrol properties.

Razor view web control categories

By default, propertied Razor views will be stored in the Razor Views sub-menu, in the order they are created. However, you can set up your own categories and store your propertied Razor views in these.

All you need to do to create a category is add the category parameter to the root control node of your propertied Razor view XML.

Using properties

To start using properties in your Razor views you need to enter the XML into the Configuration tab when editing the Razor view within Contensis. This lets you have a set of configurable properties that can be entered each time the Razor view is used on a page, much like web controls.

The XML states the control name as well as some options on whether it should be displayed in menus or not. Properties are stored within a root properties tag and inside of that are categories of sections of the options. In the example below we have a category for the person and a second category for their pictures and then a third category for the colleagues repeater.

Categories

Categories give you a simple way to group sections of razor view properties. This is the same functionality as the grouping of configuration options on web controls, to give you an idea of what to expect. Categories will be displayed in a tabbed navigation control, with the look of their own page within the window.

Default values

All properties can have a default value, an example is shown below:

<text name="company" default="Zengenti" />

This is useful for many applications where not all razor view instances require unique data.

Text properties

You can have a basic text input box by using the following code:

<text name="company" />

Editor attributes

  • radio
  • checkbox
  • list

Multiline text properties

You can also have multiline text properties, or text areas in your razor views. This can be used to input a description, for example.

<text name="Text01">
    <parameters>
<parameter name="MultiLine" value="true"/>
    </parameters>
</text>

Dropdown properties

You can have a dropdown list of selections by using the following code:

<text name="Interests" editor="select">
    <options>
        <option label="Cricket" value="Cricket" />
        <option label="Football" value="Football" />
        <option label="Chips" value="Chips" />
        <option label="Beer" value="Beer" />
    </options>
</text>

Number properties

The number property allows you to enter in a number in an input box.

<number name="IdentifierNameNumber" />

Editor attributes

  • radio
  • checkbox

Radio properties

A radio box allows you to have a yes or no boolean value stored in the options. You can also have a checkbox based off a number node, the example below uses a text node.

<text name="Interests" editor="radio">
    <options>
        <option label="Formula 1" value="f1" />
        <option label="Badminton" value="badminton" />
        <option label="Volleyball" value="volleyball" /> 
    </options>
</text>

Checkbox properties

A checkbox box also allows you to have a yes or no boolean value stored in the options. You can also have a checkbox based off a number node, the example below uses a text node.

<text name="Interests" editor="checkbox">
    <options>
        <option label="Formula 1" value="f1" />
        <option label="Badminton" value="badminton" />
        <option label="Volleyball" value="volleyball" /> 
    </options>
</text>

Node properties

The node property will give you a selection box to choose a file, this will be filled in with a node ID from the file.

<node name="IdentifierNameNode" />

Editor attributes

  • list
  • datafilter

Folder selector

You can turn the node selector into a folder selector by adding the copying the following. This allows you to select a folder from the navigator tree used throughout Contensis.

<node name="ProfileImage">
    <parameters>
<parameter name="ContentTypes" value="-1" />
    </parameters>
</node>

Taxonomy properties

A taxonomy property allows you to select items from your taxonomy tree. You can find your taxonomy tree by clicking on Taxonomy Manager in the Management Console. By default the root nodes will be shown in whichever style you choose in the editor attribute.

<taxonomy name="taxonomy" />

Editor attributes

  • radio
  • checkbox
  • tree
  • treemultiple

Specifying root nodes

You can specify a root node to narrow down the selection of your taxonomy optins by specifying the node of the root taxonomy category. See below for an example.

<taxonomy name="tax01" label="Taxonomy Drop" description="This is the taxonomy drop selector - Default">
        <parameters>
<parameter name="RootNode" value="[RootNodeKey]" />
        </parameters>
</taxonomy>

Instruction properties

You may wish to include instructions in your properties to display some help text to the users of your razor view. This can be achieved using the following code.

<instruction label="Header to my help text [This tag is optional]">
    This is the help that will appear below the label if one has be       defined. You can also enter url in here at it will be output as       a link e.g. http://www.google.co.uk"
</instruction>

Optional attributes

These optional attributes are available to all of the properties above.

required

This attribute can have a value of either True or False, if set to true the field will become required and a user must enter a value before the razor view can be saved.

description

The description to be shown alongside the input in the form of help text.

label

This is the label name that will be shown alongside the input.

Repeaters

A repeater is a value that is repeated multiple times, in the case below we are repeating a set of options to store colleague information.

<repeater name="Colleagues" min="1" max="5">
    <text name="Title">
        <options>
        <option label="Mr" value="Mr" />
        <option label="Mrs" value="Mrs" />
        <option label="Miss" value="Miss" />
        <option label="Ms" value="Ms" />
            <option label="Dr" value="Dr" />
            <option label="Legend" value="Legend" />
        </options>
    </text>
    <text name="Forename" />    
    <text name="Surname" />
</repeater>

Optional fields

Min

The minimum number of repeaters required.

Max

The maximum number of repeaters a user will be able to add into the view.

Description

The description to be shown alongside the input in the form of help text.

Label

This is the label name that will be shown alongside the input.

Node Query

Node Queries are a fairly hefty property and so we have written a separate guide on how to effectively build Node Queries.

Referencing package files

If you are using this razor view in a package and need to reference an image, stylesheet or JavaScript file you will need to reference it using the following format:

@RelativeLocalPath('path/to/js/script.js')

You need to use this method of referencing the files because you won't know where the page is that the razor view is being used inside of. This is in reference to the location of the page not the location of the razor view itself.

Using properties within the Razor view

To reference the properties set within your Razor view you can do the following:

@Properties.PropertyName

Where the PropertyName is the name you give to your properties within the name="" parameter.