Top
Top
LibraryEASYProcess Reference Manual 5WebPartsWebPart Design PageHTML 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
Using DataSource and XSL in Html
Multi-Lingual Support
Validation for Radio Button List
Hiding Elements
Templates
List Section Paging

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>

  • 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">

<tr><Item><td>EPFLD(ABAN8)</td></Item></tr>

</ListSection>

</table>

  • 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)>

<Translate>EPListItem(Text)</Translate>

</option>

             </ListOptions>


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

<Xsl>

<Table Border="1">

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

<TD>

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

</TD>

<TD>

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

</TD>

<TD>

EPFLD(Button)

</TD>

</TR>

</xsl:for-each>

</Table>

</Xsl>

</Div>


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>


Publish

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


Templates

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>

        </ListOptions>

</select>

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>

</ListOptions>

List Section Table:

<table class="table table-striped">

<thead>

<tr>

<th>Column Name</th>

<th>Column Name</th>

                                       <th>Column Name</th>

 </tr>

</thead>

<tbody>

                <ListSection Id="WSEC-10000536">

<tr>

 <td>EPVAR(PropertyName/Text)</td>

 <td>EPVAR(PropertyName/Text)</td>

                                        <td>EPVAR(PropertyName/Text)</td>

 </tr>

</ListSection>

</tbody>

</table>


Publish

Powered by EASYProcess (© 2020 K-Rise Systems, Inc).