> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/query-service/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/query-service/sample-project/page-controller.md).
# Page Controller
The sample application contains one page called `index.html` and exists in the root of the project directory.
The page controller is the code-behind for the page. In the sample application, the page controller for the `index.html` page is `index.controller.js`.
The page controller allows components and other DOM elements in HTML on the page to be programmed. It sits between these page elements and the data access layer which exists in the [Page Data](/query-service/sample-project/page-data.md) module.
## Page Data Reference
The page data module is imported into the page controller and an instance created on a public property called `data`.
```javascript
import { IndexPageData } from "./index.data.js";
...
class IndexPageController {
...
data = new IndexPageData();
...
}
```
## DOM References
Public methods on the page controller can be reference directly in HTML using the `page` variable set on the global `window` object.
```javascript
window.page = new IndexPageController();
```
## Data Binding
The index page uses three [Bootstrap components](https://docs.wirebootstrap.com/components/bootstrap): Input, Select, and Table.
Each of the input components on the page are bound to different properties on the [datasource](/query-service/sample-project/page-data.md#datasource) defined in the page data module using the `model` configuration property. See [component data binding](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/data) for details on binding components to data.
```javascript
this.serviceRoot = new wire.bsInput().render("#service-root", {
model: { obj: this.data.datasource, property: "ServiceRoot" },
...
});
```
## Validation
Values entered in the input components are required by setting the `validate` property and are validated before any calls are made to the query service. See [validating components in WireBootstrap](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/validation) for more on validating inputs.
```javascript
this.serviceRoot = new wire.bsInput().render("#service-root", {
...
validate: {required: true}
});
```
## Discover
The *Connect* button on the page calls the `connect` method on the page controller when clicked.
```markup
```
This method gets a list of entities in a database by calling `getEntities` on the page data module.
```javascript
connect(el) {
...
this.data.getEntities(this._bindEntities);
}
```
It then binds the list to the *Select* component by calling `_bindEntities`.
```javascript
_bindEntities = (tblEntities) => {
const entities = new wire.bsSelect().render("#entities", {
data: tblEntities
...
});
}
```
## Query
When a new entity is selected from the list of entities, a `change` event is triggered and the `_bindSampleData` function is called.
```javascript
_bindEntities = (tblEntities) => {
const entities = new wire.bsSelect().render("#entities", {
...
events: {
change: () => {
this._bindSampleData(entities.val());
}
}
});
}
```
`_bindSampleData` gets an updated dataset that includes the entity in the query and binds it to the *Table* component.
```javascript
_bindSampleData = (entity) => {
const table = new wire.bsTable().render("#table", {
data: this.data.getSampleDataSet(entity)
...
});
}
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wirebootstrap.com/query-service/sample-project/page-controller.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.