WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • Render
  • Configuration

Was this helpful?

  1. Working with Components
  2. Building a Component

Hello World

PreviousBuilding a ComponentNextData Events

Last updated 3 years ago

Was this helpful?

The code for the following examples are available in the project inside the \hello-world folder.

Render

The most basic WireBootstrap component is a function or class that can be instanced and contains a public method called render that takes one parameter. That parameter is the id of the element into which the component will render its content.

The following example uses plain JavaScript to create the myComponent component. When rendered, it will write the text Hello World inside the element passed into the render method.

var myComponent = function () {

    this.render = function (el) {
        document.getElementById(el).innerHTML = "Hello World";
    }

}

The example below creates a new instance of the component and renders it inside the component1 DOM element on the page.

<div id="component1"></div>

...

new myComponent().render("component1");

So as not to create the component function as a loose global, it can be created inside an anonymous function and added to an already existing global object.

The example below creates the component function on an existing global variable named app.

(function () {

    app = app || {};

    app.myComponent = function () {
    
        ...
                
    }
    
})();

...

new app.myComponent().render("component1");

Configuration

In the example above, the component displays the static text Hello World. In order to make this text configurable outside of the component, a configuration parameter can be added. A configuration parameter allows any number of settings to be passed into the component in order to control attributes such as data, display, and functionality.

Use the second parameter to the render function to pass a configuration object into the component.

In the example below, the same Hello World text is passed into the component using the configuration parameter instead of being hard-coded inside the component.

var myComponent = function () {

    this.render = function (el, config) {
        document.getElementById(el).innerHTML = config.value;
    }

}
<div id="component1"></div>

...

new myComponent().render("component1", {
    value: "Hello World"
});
building-a-component