<h3id="transfer-of-input-values-across-pages"><iclass="fa fa-wrench"></i> Transfer of input values across pages<aclass="headerlink"href="#transfer-of-input-values-across-pages"title="Permanent link">¶</a></h3>
<p>Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as <ahref="apielements.html#global_2">global</a> to the same-named global elements on a different custom Web pages at the page transition timing.</p>
<p><imgsrc="images/global.svg"></p>
<p>The <strong>global</strong> attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code.</p>
<p><iclass="fa fa-arrow-down"></i><br><iclass="fa fa-eye"></i> The value entered in <strong>input1 declared in PAGE1</strong> is reflected in <strong>input1 of PAGE2</strong> as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like:<br>
<pclass="admonition-title">Copy only for same-named and the global</p>
<p>The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.</p>
</div>
<h3id="retrieve-the-values-with-webserveron-handler"><iclass="fa fa-wrench"></i> Retrieve the values with WebServer::on handler<aclass="headerlink"href="#retrieve-the-values-with-webserveron-handler"title="Permanent link">¶</a></h3>
<p>ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.</p>
<p>When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the <ahref="acelements.html#uri">uri</a> attribute of <ahref="acelements.html#autoconnectsubmit">AutoConnectSubmit</a>) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the <ahref="apiaux.html#fetchelement">AutoConnectAux::fetchElement</a> function for value processing with the on-page handler.</p>
<p>The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.</p>
<h3id="overwrite-the-autoconnectelements"><iclass="fa fa-wpforms"></i> Overwrite the AutoConnectElements<aclass="headerlink"href="#overwrite-the-autoconnectelements"title="Permanent link">¶</a></h3>
<p>Sketches can update the attributes of AutoConnectElements with two approaches. A one is to assign directly to the attributes of a member variable of its element. The other is to overwrite them with loading the element by <ahref="apiaux.html#loadelement">AutoConnectAux::loadElement</a>. </p>
<p>The elements for attributes described in the JSON document for AutoConnectElements overwrites the member variables of the target AutoConnectElements. However, AutoConnectAux::loadElement keeps the member variables unchanged if there is no element in the JSON document. This overwriting behavior is the same for the <ahref="api.html#load">AutoConnect::load</a> function.</p>
### <iclass="fa fa-wrench"></i> Transfer of input values across pages
Since v1.0.0, AutoConnect supports a new attribute with each element that allows automatic transfer of input values across pages without sketching. AutoConnect will copy the input value of the elements declared as [global](apielements.md#global_2) to the same-named global elements on a different custom Web pages at the page transition timing.
<imgsrc="images/global.svg">
The **global** attribute will be useful for echoing input values back to another custom Web pages. This copy operation can be performed between different types. (eg., copy value from AutoConnectInput to AutoConnectText) The following example reflects the input value of PAGE1 to the AutoConnectText field of PAGE2 without sketch code.
```cpp hl_lines="8 10 28 30"
static const char PAGE1[] PROGMEM = R"(
{
"title": "PAGE1",
"uri": "/page1",
"menu": true,
"element": [
{
"name": "input1",
"type": "ACInput",
"global": true
},
{
"name": "send",
"type": "ACSubmit",
"value": "OK",
"uri": "/page2"
}
]
}
)";
static const char PAGE2[] PROGMEM = R"(
{
"title": "PAGE2",
"uri": "/page2",
"menu": false,
"element": [
{
"name": "input1",
"type": "ACText",
"global": true
}
]
}
)";
AutoConnect portal;
AutoConnectAux page1;
AutoConnectAux page2;
void setup() {
page1.load(PAGE1);
page2.load(PAGE2);
portal.join( { page1, page2 });
portal.begin();
}
void loop() {
portal.handleClient();
}
```
<iclass="fa fa-arrow-down"></i><br><iclass="fa fa-eye"></i> The value entered in **input1 declared in PAGE1** is reflected in **input1 of PAGE2** as an AutoConnectText value even if there is no sketch code to transfer it to PAGE2. It's shown as like:<br>
!!! note "Copy only for same-named and the global"
The input value will be copied only if the global attribute of the destination element is true. If an element with the same name is declared non-global, the value is not copied.
### <iclass="fa fa-wrench"></i> Retrieve the values with WebServer::on handler
ESP8266WebServer class and the WebServer class assume that the implementation of the ReqestHandler class contained in the WebServer library will handle the URL requests. Usually, it is sketch code registered by ESP8266WebServer::on function.
When a page transition from a custom Web page created by AutoConnectAux to a handler registered with ESP2866WebServer::on function, a little trick is needed to retrieve the values of AutoConnectElements. (i.e. the URI of the ESP8266WebServer::on handler is specified in the [uri](acelements.md#uri) attribute of [AutoConnectSubmit](acelements.md#autoconnectsubmit)) AutoConnect cannot intervene in the procedure in which the ESP8266WebServer class calls the on-page handler coded with the sketch. Therefore, it is necessary to retrieve preliminary the values of AutoConnectElements using the [AutoConnectAux::fetchElement](apiaux.md#fetchelement) function for value processing with the on-page handler.
The following sketch is an example of extracting values inputted on a custom web page with an on-page handler and then processing it.
Hieromon Ikasamo
5 years ago