# Class: view

## LuCI. view

The `view` class forms the basis of views and provides a standard set of methods to inherit from.

#### new LuCI.view()

luci.js, line 2687

### Methods

#### addFooter(){DocumentFragment}

luci.js, line 2905

  Renders a standard page action footer if any of the `handleSave()`, `handleSaveApply()` or `handleReset()` functions are defined.

  The default implementation should be sufficient for most views - it will render a standard page footer with action buttons labeled `Save`, `Save & Apply` and `Reset` triggering the `handleSave()`, `handleSaveApply()` and `handleReset()` functions respectively.

  When any of these `handle*()` functions is overwritten with `null` by a view extending this class, the corresponding button will not be rendered.

  ##### Returns:

  Type | Description
  --- | ---
  DocumentFragment | Returns a `DocumentFragment` containing the footer bar with buttons for each corresponding `handle*()` action or an empty `DocumentFragment` if all three `handle*()` methods are overwritten with `null`.

#### handleReset(ev){*|Promise.<*>}

luci.js, line 2871

  The handleReset function is invoked when the user clicks the `Reset` button in the page action footer.

  The default implementation should be sufficient for most views using `form.Map()` based forms - it will iterate all forms present in the view and invoke the `Map.reset()` method on each form.

  Views not using `Map` instances or requiring other special logic should overwrite `handleReset()` with a custom implementation.

  To disable the `Reset` page footer button, views extending this base class should overwrite the `handleReset` function with `null`.

  The invocation of this function is wrapped by `Promise.resolve()` so it may return Promises if needed.

  Name | Type | Description
  --- | --- | ---
  `ev` | Event | The DOM event that triggered the function.

  ##### Returns:

  Type | Description
  --- | ---
  * | Promise.<*> | Any return values of this function are discarded, but passed through `Promise.resolve()` to ensure that any returned promise runs to completion before the button is reenabled.

#### handleSave(ev){*|Promise.<*>}

luci.js, line 2790

  The handleSave function is invoked when the user clicks the `Save` button in the page action footer.

  The default implementation should be sufficient for most views using `form.Map()` based forms - it will iterate all forms present in the view and invoke the `Map.save()` method on each form.

  Views not using `Map` instances or requiring other special logic should overwrite `handleSave()` with a custom implementation.

  To disable the `Save` page footer button, views extending this base class should overwrite the `handleSave` function with `null`.

  The invocation of this function is wrapped by `Promise.resolve()` so it may return Promises if needed.

  Name | Type | Description
  --- | --- | ---
  `ev` | Event | The DOM event that triggered the function.

  ##### Returns:

  Type | Description
  --- | ---
  * | Promise.<*> | Any return values of this function are discarded, but passed through `Promise.resolve()` to ensure that any returned promise runs to completion before the button is reenabled.

#### handleSaveApply(ev){*|Promise.<*>}

luci.js, line 2834

  The handleSaveApply function is invoked when the user clicks the `Save & Apply` button in the page action footer.

  The default implementation should be sufficient for most views using `form.Map()` based forms - it will first invoke `view.handleSave()` and then call `ui.changes.apply()` to start the modal config apply and page reload flow.

  Views not using `Map` instances or requiring other special logic should overwrite `handleSaveApply()` with a custom implementation.

  To disable the `Save & Apply` page footer button, views extending this base class should overwrite the `handleSaveApply` function with `null`.

  The invocation of this function is wrapped by `Promise.resolve()` so it may return Promises if needed.

  Name | Type | Description
  --- | --- | ---
  `ev` | Event | The DOM event that triggered the function.

  ##### Returns:

  Type | Description
  --- | ---
  * | Promise.<*> | Any return values of this function are discarded, but passed through `Promise.resolve()` to ensure that any returned promise runs to completion before the button is reenabled.

#### abstractload(){*|Promise.<*>}

luci.js, line 2725

  The load function is invoked before the view is rendered.

  The invocation of this function is wrapped by `Promise.resolve()` so it may return Promises if needed.

  The return value of the function (or the resolved values of the promise returned by it) will be passed as first argument to `render()`.

  This function is supposed to be overwritten by subclasses, the default implementation does nothing.

  ##### Returns:

  Type | Description
  --- | ---
  * | Promise.<*> | May return any value or a Promise resolving to any value.

#### abstractrender(load_results){Node|Promise.<Node>}

luci.js, line 2757

  The render function is invoked after the `load()` function and responsible for setting up the view contents. It must return a DOM `Node` or `DocumentFragment` holding the contents to insert into the view area.

  The invocation of this function is wrapped by `Promise.resolve()` so it may return Promises if needed.

  The return value of the function (or the resolved values of the promise returned by it) will be inserted into the main content area using `dom.append()`.

  This function is supposed to be overwritten by subclasses, the default implementation does nothing.

  Name | Type | Description
  --- | --- | ---
  `load_results` | * | null | This function will receive the return value of the `view.load()` function as first argument.

  ##### Returns:

  Type | Description
  --- | ---
  Node | Promise.<Node> | Should return a DOM `Node` value or a `Promise` resolving to a `Node` value.