7EN02-0390-03

Sample HTML code for setup webpage content

Content and formatting of a setup webpage is controlled by its HTML code.

Sample setup webpage content

Line # Sample HTML
1 SampleSetupPane.html
2

 

3 <div class="content-fit">
4 <form id="formSampleSettings">
5

 

6 <div class="accordion">
7 <h3 target="sample-basic">$%localizedString(Basic Settings)#$</h3>
8 <div id="sample-basic">
9 <table class="formtable">
10 <tr>
11 <th>&nbsp;</th>
12 <th>&nbsp;</th>
13 </tr>
14 <tr>
15 <td>$%localizedString(Ethernet)#$</td>
16 <td>&nbsp;</td>
17 </tr>
18 <tr class="minor">
19 <td>$%localizedString(MAC Address)#$</td>
20 <td regname="MAC Address"></td>
21 </tr>
22 <tr class="minor">
23 <td>$%localizedString(Ethernet Device Name)#$</td>
24 <td><input name="Ethernet Device Name" type="text" /></td>
25 </tr>
26 <tr class="minor">
27 <td>$%localizedString(IP Address)#$</td>
28 <td><input name="IP Address" type="text" /></td>
29 </tr>
30 </table>
31

 

32 </div>
33

 

34 <h3 target="sample-advanced">$%localizedString(Advanced Settings)#$</h3>
35 <div id="sample-advanced">
36 <table class="formtable" id="frameFormatDropdownContainer">
37 <tr>
38 <th>&nbsp;</th>
39 <th>&nbsp;</th>
40 </tr>
41 <tr>
42 <td>$%localizedString(TCP Keep Alive Minutes)#$</td>
43 <td><input type="text" name="TCP Keep Alive Minutes" class="small" /> <span unitsreg="TCP Keep Alive Minutes"></span></td>
44 </tr>
45 <tr>
46 <td>$%localizedString(Enable Web Server)#$</td>
47 <td><select name="Enable Web Server"></select> </td>
48 </tr>
49 </table>
50

 

51 </div>
52 </div> 
53

 

54 <input type="submit" class="apply" value='$%localizedString(Apply)#$' />
55

 

56 </form>
57

 

58

 

59 <script type="text/javascript">
60

 

61 SetupPane.init('formSampleSettings');
62 formChangeDetection.initFormChangeDetection('#formSampleSettings', '#dialogFormChanges');
63

 

64 </script>
65 </div>

Sample setup webpage content description

Line # Description
1

SampleSetupPane.html

The HTML filename, including the HTML extension (.html). This filename must comply with SFTP filename requirements (no spaces or special characters). The filename (without the HTML extension) is the name shown on the webpage menu.

4

<form id="formSampleSettings">

“formSampleSettings” is the name of the webpage content. This name must be unique

7

<h3 target="sample-basic">

This creates the first webpage content pane. “sample-basic” is the name of the webpage content. This name must be unique.

$%localizedString(Basic Settings)#$</h3>

Basic Settings is the title of the webpage content pane. This title is translated if possible.

8

<div id="sample-basic">

This must match the name of the webpage content in line 7.

15

<td>$%localizedString(Ethernet)#$</td>

Ethernet is the subheading. This heading is translated if possible.

19

<td>$%localizedString(MAC Address)#$</td>

MAC Address is the row heading. This heading is translated if possible.

20

<td regname="MAC Address"></td>

This displays the value of the read-only named register MAC Address.

23

<td>$%localizedString(Ethernet Device Name)#$</td>

Ethernet Device Name is the row heading. This heading is translated if possible.

24

<td><input name="Ethernet Device Name" type="text" /></td>

This displays the instantaneous value of the configurable named register Ethernet Device Name in a text-edit field.

The type must match the named register type, in this case, an alphanumeric string.

27

<td>$%localizedString(IP Address)#$</td>

IP Address is the row heading. This heading is translated if possible.

28

<td><input name="IP Address" type="text" /></td>

This displays the instantaneous value of the configurable named register IP Address in a text-edit field.

The type must match the named register type, in this case, an alphanumeric string.

34

<h3 target="sample-advanced">

This creates the second webpage content pane. Sample-advanced is the name of the webpage content. This name must be unique.

$%localizedString(Advanced Settings)#$</h3>

Advanced Settings is the title of the webpage content pane. This title is translated if possible.

35

<div id="sample-advanced">

This must match the name of the webpage content in line 34.

42

<td>$%localizedString(TCP Keep Alive Minutes)#$</td>

TCP Keep Alive Minutes is the row heading. This heading is translated if possible.

43

<td><input type="text" name="TCP Keep Alive Minutes" class="small" /> 

This displays the instantaneous value of the configurable named register TCP Keep Alive Minutes in a text-edit field.

The type must match the named register type, in this case, an alphanumeric string.

<span unitsreg="TCP Keep Alive Minutes"></span></td>

This displays the units that the meter has defined for the named register TCP Keep Alive Minutes.

NOTE: There are no defined units for TCP Keep Alive Minutes, so no units are displayed.

46

<td>$%localizedString(Enable Web Server)#$</td>

Enable Web Server is the row heading. This heading is translated if possible.

47

<td><select name="Enable Web Server"></select> </td>

Enable Web Server is the named register that is displayed. Named registers are listed in the meter’s registers map.

The type must match the named register type, in this case, an enumerated value that is displayed as a drop-down list.

61

SetupPane.init('formSampleSettings');

This must match the webpage content name from line 4.

62

formChangeDetection.initFormChangeDetection('#formSampleSettings', '#dialogFormChanges');

This must match the webpage content name from line 4. This HTML code updates all of the webpage’s values.

QR code for this page

Was this helpful?