HTML Override

HTML Override

HTML Override Overview

A Webpart can have HTML Override turned on. This will cause the WebPart to display the HTML specified in the HTML Editor rather than any of the sections or Web Controls on the WebPart Canvas. The HTML in the HTML Editor can reference Web Controls, List Sections, and DataSources, but how the values are displayed is in complete control of the developer writing the HTML.

Referencing Web Controls and List Sections

Within the HTML, you can reference Web Controls and List Sections that exist on the WebPart Canvas. Below is how to achieve this.

  • EPFLD(FieldName)

Use this to print entire field in html.

  • EPVAR(FieldName/PropertyName)

Use this to print value of a property of a field in html.

  • EPATTR(FieldName)

Use this to print full attribute set of a field such as id, name, onclick etc.

  • ListSection (ListPerRow = 1, Grid)

Use this to iterate through a list section items.

See example below. Id should match exactly with list section item. EPATTR and EPVAR should be use exactly as described above.

  <ListSection Id="WSEC-10003859">

<a EPATTR(PerPageProcess) class="EPVAR(PerPageClass/Text)">

EPVAR(PerPageValue/Text)</a> EPVAR(PerPageSplit/Text)


  • ListSection (ListPerRow > 1, Thumbnail type list)

Use this to iterate through a list section items. Use Item tag as below to iterated it for number of ListPerRow.

Example: ListPerPage = 12, ListPerRow = 4. As shown below, HTML inside Item will iterated 4 times for a total of three rows (4*3=12). So you will get a 4 by 3 table.

See example below. Id should match exactly with list section item. EPFLD, EPATTR and EPVAR should be use exactly as described above.

<table border="1">

<ListSection Id="WSEC-10004033">




  • ListOptions

Use this feature to iterate through list items of a list control. Use variable as EPListItem(Value), EPListItem(Selected), EPListItem(Text), EPListItem(Checked), EPListItem(Id).

EPListItem(Checked) should be used for checkbox or radio button list to return checked = “checked” in the html output.

See example below.

        <ListOptions Name="Name">

<option value="EPListItem(Value)" EPListItem(Selected)>




Using DataSource and XSL in Html

Html mode allows for you to use Xsl logic with a process data source. Only one process DS can be used in Html source.

  • Create a process data source.
  • In webpart properties, in html override section, set HtmlDataSource to deginaged process DS. Only one process DS can be used.
  • Then use following syntax. Xsl tag designate an area in HTML source to be xsl transform ready. Then use xsl syntax such as for-each, value-of etc just like you would use inside a process evaluate.

<Div>This is Test


<Table Border="1">

<xsl:for-each select="WorkData/Inquire"><TR>


<xsl:value-of select="ABAN8"/>



<xsl:value-of select="ABALPH"/>










Multi-Lingual Support

If you use the HTML Override feature, you will need to tell EASYProcess where text is contained that needs to be translated. To do this you will use the Translate tag. Enclosed in the Translate tag is the text that you want to translate.

<Translate>Text Here</Translate>

Validation for Radio Button List

In the container span tag for radio button list, add display:block style as below. This will ensure that this feature will work in Chrome.

<Span EPATTR(Options) style="display:block">

Hiding Elements

You can hide elements based on process logic by setting the value of a hidden input to “display:none” in a process (use SetFieldProperties service). Then in the HTML Editor, set the style of the element you want to hide to the value of the hidden input you used.

Ex: <div style=EPVAR(InputName/Value)>


Copy these templates into the HTML Editor, replacing ‘PropertyName’ with the name of the Web Control you want to use and using the correct ListSection ID where necessary. The classes can be changed as needed.

Dropdown List:

<select EPATTR(PropertyName) type="text" class="form-control">

        <ListOptions Name="PropertyName">

                <option value="EPListItem(Value)" EPListItem(Selected)>EPListItem(Text)</option>



Radio Buttons:

<ListOptions Name="PropertyName">

        <label class="radio-inline"><input EPATTR(PropertyName) type="radio" name="optradio" value="EPListItem(Value)" EPListItem(Checked)><Translate>EPListItem(Text)</Translate></label>


List Section Table:

<table class="table table-striped">



<th>Column Name</th>

<th>Column Name</th>

                                       <th>Column Name</th>




                <ListSection Id="WSEC-10000536">









List Section Paging

Paging buttons and current page have to be inside the Paging tag, but variables can be outside of the Paging tag.

This is a list of all available paging variables. To use them, just replace ‘WSEC-10003993’ with the Section Id you are using.












To get the record count message to display (ex: Total records found: 28. Displaying record 1 to 10.)  just put the PagingText variable where you want the message to be. However, you can use NoOfRows, StartIndex, and EndIndex to get each number and then customize the message.

Using this paging will give the default EASYProcess appearance for the buttons:


<Input type="hidden" name="CurrentPage" id="CurrentPage_WSEC-10003994" ct="Field" ri="-1" cp="-1" sectionId="WSEC-10003994" value="EPVAR(WSEC-10003994/CurrentPage)" class="" onchange="SaveControlState(event,'Value');">

<Input  type = "button" onclick = "javascript:Paging(event,'PrevPageAll');" name = "PrevPageAll" value = "<<" Width = "20px" class = "" EPVAR(WSEC-10001045/PrevPageAllDisabled)></Input>

<Input  type = "button" onclick = "javascript:Paging(event,'PrevPage');" name = "PrevPage" value = "<" Width = "20px" class = "" EPVAR(WSEC-10001045/PrevPageDisabled)></Input>

<Input  type = "button" onclick = "javascript:Paging(event,'NextPage');" name = "NextPage" value = ">" Width = "20px" class = "" EPVAR(WSEC-10001045/NextPageDisabled)></Input>

<Input  type = "button" onclick = "javascript:Paging(event,'NextPageAll');" name = "NextPageAll" value = ">>" Width = "20px" class = "" EPVAR(WSEC-10001045/NextPageAllDisabled)></Input>


If you need the buttons to actually be buttons instead of Inputs, use this:


                <Input type="hidden" name="CurrentPage" id="CurrentPage_WSEC-10001045" ct="Field" ri="-1" cp="-1" sectionId="WSEC-10001045" value="EPVAR(WSEC-10001045/CurrentPage)" class="" onchange="SaveControlState(event,'Value');">

                        <ul class="pagination">

                                <li class="prev"><button onclick = "javascript:Paging(event,'PrevPageAll');" name = "PrevPageAll" EPVAR(WSEC-10001045/PrevPageAllDisabled)>«</button></li>

                                <li class="prev"><button onclick = "javascript:Paging(event,'PrevPage');"    name = "PrevPage" EPVAR(WSEC-10001045/PrevPageDisabled)>‹</button></li>

                                <li class="next"><button onclick = "javascript:Paging(event,'NextPage');"    name = "NextPage" EPVAR(WSEC-10001045/NextPageDisabled)>›</button></li>

                                <li class="next"><button onclick = "javascript:Paging(event,'NextPageAll');" name = "NextPageAll" EPVAR(WSEC-10001045/NextPageAllDisabled)>»</button></li>