Arms_v2.8_webui5 NPM

Introduction

arms_v2.8_webui is a package which allows the User to use the custom controls by importing it into the Application. for example, we can import the textbox input control just my importig the following in the application. import TextBox from 'arms_v2.8_webui/input' where 'input' is the UserControl added to the 'arms_v2.8_webui' package.

Pre-requisites

NodeJS to tbe installed in the system.

How to install the package?

In the root folder of the application, execute 'npm install arms_v2.8_webui' command to install the Node package.

npm install arms_v2.8_webui

Folder Structure of the package

Usage

TextBox

import textBox from 'arms_v2.8_webui/input'

In the render method, call the component as

<TextBox /> // type is optional...if not given the default type is text...
<TextBox type='number' /> // for number types
<TextBox type='password' /> // for password types

There is a default styling provided to the control which is outline: 'none', backgroundColor: 'white', marginTop: '2px', marginBottom: '2px', width: '70px', "& .MuiInputBase-root": { height: '22px' }

We can also provide custom styling from where the control is called...

let Style = {
    width: '100px'
}
<TextBox  style={Style}/>

We can also provide DataTable, DataColumn, name, value, onChange,disabled, placeHolder values as props to the control. for example

<TextBox  DataTable='table1' DataColumn='column1'/>

Button

import Button from 'arms_v2.8_webui/button'

In the render method, call the component as

<Button /> // renders a plain button control
<Button text='Click' /> // renders a button with the text as 'Click'
<Button text='Click' onClick={ClickEventHandler} /> // renders a button with the text as 'Click' with a event handler for the Click event.

The default styling given for this component is backgroundColor: 'rgb(77,73,152)', color: 'white', textTransform: 'none', outline: 'none', cursor: 'pointer', borderColor: 'white', width:'70px',height:'22px'

We can also provide custom styling from where the control is called...

let Style = {
    width: '100px',
    height: '30px'
}
<Button  style={Style}/>

We can also provide name, type, disabled values as props to the control. for example

<Button  name='frmSubmit' type='submit'/>

DropDown

import DropDown from 'arms_v2.8_webui/ComboBox'

In the render method, call the control as

const CompanyData = [
    {value:'flight1', listname:"Flight1"},
    {value:'flight2', listname:"Flight2"},
  ] 
<DropDown name='cmbData' options={CompanyData}/> // name is the name for the dropdown and options is the array is the DropDown Content

We can also provide onChange, disabled values as props to the control. for example

<DropDown  disabled='true'  onChange={onChangwHandler}/>

Default styling for the Dropdown is textAlign:'center', border: '1px solid #ccc', backgroundColor: 'white', marginTop: '2px', marginBottom: '2px', width: '70px', fontSize: '11px', padding: '3px 0px', height: '22px', position: 'relative', "& .MuiSvgIcon-root": { color: 'rgb(255, 255, 255)', backgroundColor: 'rgb(70, 160, 184)', height:'20px', marginTop:'2px' } .MuiSvgIcon-root is the togglebutton for the control. We can also provide custom styling as

let Style = {
  width: '100px',
  height: '30px'
}
<DropDown style={Style}/>

Radio Button Group

import Radio from 'arms_v2.8_webui/RadioButton'

In the render method, call the control as

const CompanyData = [
    {id:'flight1', name:"Flight1"},
    {id:'flight2', name:"Flight2"},
  ] 
<Radio name='rData' options={CompanyData}/> // name is the name for the RadioGroup and options is the array is the control contents

We can also provide onChange, disabled values as props to the control. for example

<Radio  disabled='true'  onChange={onChangeHandler}/>

Default styling for the Dropdown is backgroundColor: 'white', display: 'block', marginTop: '2px', marginBottom: '2px', position: 'relative', top: '10px', right: '3px'

We can also provide custom styling as

let Style = {
    width: '100px',
    height: '30px'
}
<Radio style={Style}/>

Calender

import Calender from 'arms_v2.8_webui/calender'

In the render method, call the component as

<Calender label="Date Range" />

There is a default styling provided to the control which is

width: "137px", marginLeft:'10px', marginRight:'10px', marginTop:'2px', "& .MuiInputBase-root": { height: "22px" }, backgroundColor: "rgb(255, 255, 255)", color: "rgb(70, 160, 184)"

TextArea

import TextArea from 'arms_v2.8_webui/TextArea'

In the render method, call the component as

<TextArea /> // type is optional...if not given the default type is text...

There is a default styling provided to the control which is outline: 'none', backgroundColor: 'white', marginTop: '2px', marginBottom: '2px', width: '70px', "& .MuiInputBase-root": { height: '22px' }

We can also provide custom styling from where the control is called...

let Style = {
    width: '100px'
}
<TextArea  style={Style}/>

We can also provide DataTable, DataColumn, name, value, onChange,disabled, placeHolder values as props to the control. for example

<TextArea  DataTable='table1' DataColumn='column1'/>

Ag Grid

import AgGrid from 'arms_v2.8_webui/AgGrid'

In the render method, call the component as

const Data = [
       {make: "Toyota", model: "Celica", price: 35000},
       {make: "Ford", model: "Mondeo", price: 32000},
       {make: "Porsche", model: "Boxter", price: 72000}
   ];
<AgGrid data={Data}/> //The control automatically generates the column headers.In this example(make,model, price) and places the data under it

The default styling for this control is height: '400px', width: '1000px'

We can provide custom styling for this control as

let Style = {
    width: '500px'
}
<AgGrid data={Data} style={Style}/> //The control automatically generates the column headers.In this example(make,model, price) and places the data under it

Gridlayout

import MGrid from 'arms_v2.8_webui/GridLayout'

In the render method, call the component as

const Data = [
       {make: "Toyota", model: "Celica", price: 35000},
       {make: "Ford", model: "Mondeo", price: 32000},
       {make: "Porsche", model: "Boxter", price: 72000}
   ];
<MGrid data={Data}/> //The control automatically generates the column headers.In this example(make,model, price) and places the data under it

The default styling for this control is height: '400px', width: '1000px'

We can provide custom styling for this control as

let Style = {
    width: '500px'
}
<MGrid data={Data} style={Style}/> //The control automatically generates the column headers.In this example(make,model, price) and places the data under it