Toolkit Tag Library

The BillingPlatform Web Toolkit Tag Library is designed to make creating highly customized and specific User Interfaces quick and easy by encapsulating all the HTML and CSS required to generate standard UI components from the application metadata into a few simple tags. The Web toolkit Tag Library is built on the ReactJS framework and incorporates some of the framework syntax as well as specific, BP syntax and methods.

The Tag library can be utilized in both Page and Extension widgets for anything that leverages built-in HTML and CSS. The general, top-level tag structure for page and extension widgets is as follows:

Page Widget

<BPUI.Page>
…..
…..
</BPUI.Page>

Extension Widget

<BPUI.Extension>
…..
…..
</BPUI.Extension>

 

BPUI.Dialog

Used for creating dialogs that can be displayed by calling the built-in, BPActions.showDialog in the JavaScript Controller.

Attributes

Name   Description
name String Name of dialog. used to show dialog

Basic Tag Structure

<BPUI.Dialog name="yourTagName/">

Example

---------------------------HTML----------------------------------
<BPUI.Page>
    <BPUI.Dialog name="billingProfileDialog">
        <BPUI.PopupForm>
            <BPUI.Panel style ={{width: 100 + "%", height: 100 + "%"}}>
                <BPUI.InputField variable={billingProfile}  field="AccountId"/>
                <BPUI.InputField variable={billingProfile}  field="Email"/>
                <BPUI.InputField variable={billingProfile}   field="Status"/>
            </BPUI.Panel>
        </BPUI.PopupForm>
    </BPUI.Dialog>

    <BPUI.Button name="ProfileButton" title="click to show dialog" onClick={showBillingProfile}/>

</BPUI.Page>

------------------------------JavaScript---------------------------------
var billingProfile = new BPUI.ReferenceObject();
BPUI.afterRender = function () {
    billingProfile.set(BPConnection.BillingProfile.retrieveFiltered
                  ("AccountId = " + BPSystem.getSelectedEntityId(BPSystem.nodeName) ).single());
       }

function showBillingProfile()

    BPActions.showDialog("billingProfileDialog"
                         , {
                          resizable: false,
                          draggable: true,
                          title: "Billing Profile",
                          modal: true,
                          width: 390,
                          maxHeight: (window.innerHeight * 2 / 2),
                          dialogClass: 'dialog-lookup',
                          maxWidth: 450
                        });
}

 

BPUI.Page

Root element for all Page Widgets.

Attributes

Name Description
style explicit styles
name name of the element
className css class names

Basic Tag Structure

<BPUI.Page name="yourTagName" style=”inlineStyle” className=”cssClassName”/>

Example

<BPUI.Page name="yourTagName" style=”inlineStyle” className=”cssClassName”>
    <BPUI.FormLayout submitAction={saveInvoices} cancelAction={cancel}>
        <BPUI.Panel style ={{width: 900 + "px"}}>
             <BPUI.InputField variable={invoice}  
                               field="BillingProfileId" 
                               label="Billing Name" onUpdate={accountIdUpdate}/>
             <BPUI.OutputField name="InvoiceStatus" field="Status" 
                               variable={invoice} label="Invoice Status"/>                
        </BPUI.Panel>
    </BPUI.FormLayout>
</BPUI.page>

 

BPUI.Message

Used to display errors and other messages. This tag must be inside of the BPUI.Panel tag.

Attributes

Name   Description
name String Name of Message element. Used by the Javascript methods to reference in order to add a message or an error.
variables variables (optional) List of Objects for which errors can be displayed .This is one or more variables which is passed to variable property of another tags

Basic Tag Structure

<BPUI.Message name="compnentName" variables={[variableOrObjectName]}/>

Example

<BPUI.Panel style ={{width: 900 + "px"}}>
         <BPUI.Message name="invoiceMessages" variables={invoice}/>
         <BPUI.PanelRow>
            <BPUI.InputField variable={invoice}  field="BillingProfileId" 
                             label="BillingProfile" onUpdate={accountIdUpdate}/>
            <BPUI.InputField name="BillingProfileId" variable={billingProfile}  field="Email"/>
        </BPUI.PanelRow>
</BPUI.Panel>
-----------------------JavaScript---------------------------
//adds “Test Error 1” to the “InvoiceMessages” element for Invoice objects
BPActions.showError("Test Error 1","invoiceMessages",invoice);

//Adds Errors to the Message element that handles invoice Object variable errors
BPActions.handleError("Test Error 2",invoice); 

//Adds Errors to the Message element that handles invoice or billing Object variable errors
BPActions.handleError("Test Error 3",[invoice,billing])

 

BPUI.Extension

Root element for Extension Widgets

Attributes

Name Description
style explicit styles
name name of element
className css class names

Basic Tag Structure

<BPUI.Extension name="yourTagName" style=”inlineStyle” className=”cssClassName”/>

Example

<BPUI.Extension name="yourTagName" style=”inlineStyle” className=”cssClassName”>
<BPUI.Divider Name="InvoiceChart" style ={{width: 1000 + "px"}}>Account Activity</BPUI.Divider>
    <p>&nbsp;</p>
    <table>
      <tr>
        <td>
           <div id="chart_div" style={{height:"300px",width:"100%"}} >loading...</div></td>
        <td>
           <div id="product_pie" style={{height:"300px",width:"600px"}} >loading...</div></td>
      </tr>
    </table>
</BPUI.Extension>

 

BPUI.Divider

Used as a header or a divider for different sections of an HTML form

Attributes

Name Description
style explicit, inline styles
name name of the element
className css class names

Basic Tag Structure

<BPUI.Divider>Your Text Goes Here</BPUI.Divider>

Example

<BPUI.Page>
   <BPUI.Divider Name="InvoiceChart" style ={{width: 1000 + "px"}}>Account Activity</BPUI.Divider>
   <p>&nbsp;</p>
    <table>
      <tr>
        <td>
           <div id="chart_div" style={{height:"300px",width:"100%"}} >loading...</div></td>
        <td>
           <div id="product_pie" style={{height:"300px",width:"600px"}} >loading...</div></td>
      </tr>
    </table>
</BPUI.Page>

 

The image above shows a widget displaying two google charts with a BPUI.Divider providing the “Account Activity” Header.

 

BPUI.FormLayout

Used Parent Element for INput Forms Provides a button bar with submit and cancel buttons as well as the “Return to List” icon.

Attributes

Name   Description
submitAction Function Function which will be called then submit is pressed
cancelAction Function Function which will be called then cancel is pressed

Basic Tag Structure

<BPUI.FormLayout submitAction={yourCustomJsAction} cancelAction={yourCustomJsAction}>

Example

<BPUI.Page>
   <BPUI.FormLayout submitAction={saveInvoices} cancelAction={cancel}>
    <BPUI.Divider>Account and Delivery Info</BPUI.Divider>            
         <BPUI.Panel>
            <BPUI.Message name="invoice" variables={invoice}/>                
            <BPUI.InputField variable={invoice} field="BillingProfileId" />
        </BPUI.Panel>        
    </BPUI.FormLayout>
</BPUI.Page>

 

BPUI.Panel

Used as the basic container for a form. Generates a TABLE tag and as such, all HTML TABLE attributes are supported.

Attributes

Name Description
style explicit styles
name name of the component
className css class names

Basic Tag Structure

<BPUI.Panel>

Example

<BPUI.Page>              
         <BPUI.Panel>
            <BPUI.Message name="invoice" variables={invoice}/>                
            <BPUI.InputField variable={invoice} field="Status" />
         <BPUI.OutputField variable={invoice} field="BillingProfileId" />
        </BPUI.Panel>
</BPUI.Page>

 

BPUI.PanelRow

Child of BPUI.Panel. Generates a TR tag and supports all associated attributes.

Attributes

Name Description
style explicit styles
name name of the component
className css class names

Basic Tag Structure

<BPUI.PanelRow>

Example

{/* Spacer Row */}
<BPUI.Panel style ={{width: 900 + "px"}}>
         <BPUI.PanelRow style ={{height: 30 + "px"}}>
              <BPUI.PanelRowColumn />
         </BPUI.PanelRow>
</BPUI.Panel>
{/*
* Invoice Attachments.
* Attachment Documents to associate with the Invoice
*/}
<BPUI.Divider Name="Attachments" style ={{width: 1000 + "px"}}>Attachments</BPUI.Divider>
<BPUI.Panel style ={{width: 900 + "px"}}>
         <BPUI.PanelRow>
               <BPUI.InputField variable={invoice}  field="Attachment1" />
               <BPUI.InputField variable={invoice}  field="Attachment2"/>
               <BPUI.InputField variable={invoice}  field="Attachment3"/>
         </BPUI.PanelRow>
</BPUI.Panel>

 

BPUI.PanelRowColumn

Child of BPUI.PanelRow. Generates a TD tag and supports all associated attributes.

Attributes

Name Description
style explicit styles
name name of the component
className css class names

Basic Tag Structure

<BPUI.PanelRowColumn>

Example

{/* Spacer Row */}
<BPUI.Panel style ={{width: 900 + "px"}}>
     <BPUI.PanelRow style ={{height: 30 + "px"}}>
           <BPUI.PanelRowColumn />
      </BPUI.PanelRow>
</BPUI.Panel>

 

BPUI.EmbeddedList

Structure for creating an editable (or read-only) Data Grid. Given a data source it will render column headers, rows and columns containing the data referenced in its “variable” attribute.

Attributes

Name   Description
focusCell number Specifies the column number of the first row to set focus when the Embedded List is rendered.
canAdd boolean Specifies whether the embedded List will allow for new rows.
This property can be changed programmatically using the BPActions.changeState method.
onAdd function Handler for when a row is added to the embedded List via the plus (“+”) icon.
Passes four arguments to the handler function
Passes 5 arguments to the handling function
1. row: the row number of the deleted item in the source collection
2. event: JSX event
3. collection: The whole collection that is populating the embedded list.
4. values: values if we use manual binding
5.(this pointer current scope of embedd)
onDel function Called when a row is removed via the minus (“-”) icon.
Passes 5 arguments to the handling function
1. row: the row number of the deleted item in the source collection
2. event: JSX event
3. collection: The whole collection that is populating the embedded list.
4. values: values if we use manual binding
5.(this pointer current scope of embedd)
onCellBlur function Called every time focus leaves a cell element
onRowClick function Called when a row in the list is clicked.
Arguments are:
row index: the position of the row in the source array
event object: the Object in the array at the current index
variable BPUI.ReferenceObject The source variable for the embedded list. This would be declared in the JavaScript controller as a BPUI.ReferenceObject type.

Basic Tag Structure

<BPUI.EmbeddedList variable={collectionVariable} 
                   name="componentName" 
                   width="100%" 
                   onCellBlur={yourOnBlurFunction} 
                   onAdd={yourOnAddFunction} 
                   onRowClick={yourRowClickFunction}  
                   onDel={yourDeleteFunction}>

Example

<BPUI.Divider Name="ActivityDiv">Invoice Line Items</BPUI.Divider>
<BPUI.Panel style ={{width: 900 + "px"}}>
   <BPUI.PanelRow>
       <BPUI.PanelRowColumn colSpan="4">
<BPUI.EmbeddedList variable={activities} name="activities" width="100%" 
                   onCellBlur={calculateAmount} onAdd={addActivity}>
             <BPUI.TableColumn name="ActivityDate" type="DATE_SELECTOR" 
                                 displayTransform={formatDate} index="1" label="Service Date" />
             <BPUI.TableColumn name="ProductId" index="2" label="Product"/>
             <BPUI.TableColumn name="Quantity" index="3" label="Quantity"/>
             <BPUI.TableColumn name="Rate" index="4" label="Rate"/> 
             <BPUI.TableColumn name="RatedAmount" index="5" label="Amount" editable="false"/>
           </BPUI.EmbeddedList>
      </BPUI.PanelRowColumn>
   </BPUI.PanelRow>
</BPUI.Panel>

--------------------------------JavaScript------------------------------------------------
//Declare a global activities collection reference variable
window.activities = new BPUI.ReferenceObject();

//Initialize the BP connection and session for database access
BPSystem.initialize();

//load the activities on initialization
function init() {
     //Load the Activities from the database
BPConnection.Activity.queryAsync("select Quantity,ActivityDate,Rate,RatedAmount,ProductId 
                                +”  from Activity where rownum<20 and “
                                +” AccountObj.Id="+value).collection().done(
                                    function(collection) {
               activities.set(collection);
              });

}

//called from the embeddedList when a row is added
function addActivity(index)
{
    activities.get().addNew({}, index + 1); // next item

    //add the account and invoice references to the new activity record
    activities.get().forEach( function(el) {
                el.AccountId = account.get().Id;
                el.InvoiceId = invoice.get().Id;
            });
    //refresh the embeddedList to display the new row
    BPActions.refreshState("activities");
}

//Calculate the amount when the user changes quantity or rate in the embeddedList
function calculateAmount(row,column,event,scope) {
    var activityCollection = activities.get();
    var rowElement = activityCollection.elements[row];
    if (column==1||column==2||column==3) {
         if (rowElement.Quantity && rowElement.Rate && column==3 ) {
             rowElement.RatedAmount = (rowElement.Rate*rowElement.Quantity).toFixed(2);
         }
    }
}

The image above shows the sample BPUI.EmbeddedList rendered in the browser. Notice that the metadata about each field is interpreted in the BPUI.TabeColumn to render the appropriate control type for the referenced entity (referenced in the “variable” attribute) and field.

 

BPUI.InputField

The InputField tag is used to add form elements without having to write any HTML. The Input field can be used to render any of the standard form controls used in the PG User Interface by manually selecting the form type. It can also be passed a reference Object and related Field to read the metadata and render the appropriate control type automatically.

Attributes

Name   Description
field String If an Object is specified, the specific, Entity field Name to reference with this Input Field
variable BPUI.ReferenceObject The Reference Object in the JavaScript Controller
type String Type of control to display. Explicit. For non-entity variables or to override the metadata or control type associated a specified Entity Field.
1. TEXT
2. TEXTAREA
3. RADIO_GROUP_VERTICAL
4. RADIO_GROUP_HORIZONTAL
5. DATE_SELECTOR
6. DATE_TIME_SELECTOR
7. SELECT1
8. SELECTX
9. CHECKBOX
10. DOCUMENT
11. EMBEDDED_LIST
label String Display label for the field
required Boolean determines whether the field is required. System will error if left blank when this is set to true.
onUpdate Function Function to call then the data changes. Similar to the onChange Event
width Numeric Explicitly defined width
layout String
[Standard, Standalone]
Standard: Renders the control with its label and associated HTML structure
Standalone: Renders just the Control of the type specified in the metadata.

Basic Tag Structure

<BPUI.InputField variable={referenceObjectVar}  
                 field="ObjectFieldName" 
                 type=”standardControlType”
                 label=”overrideFieldLabel”
                 required=”true/false”
                 onUpdate={yourCustomFunction}
                 width=”100”
                 layout=””/>

Example

Explicit definition of the field, its type and data

-------------------------------------------JavaScript---------------------------------------
// Manually load set of option values using a JSON array
var radioOptions = new BPUI.ReferenceObject({value:"value 1",values:["value 1","value 1","value 3"]});

-------------------------------------------HTML----------------------------------------------
<BPUI.InputField variable={radioOptions} type="RADIO_GROUP_VERTICAL" label="My Radio Options"/>

Loading Metadata from the BPOBject and Related Entity Field

-------------------------------------------JavaScript---------------------------------------
//Declare a reference object to bind to the BPUI tag
var billingProfile = new BPUI.ReferenceObject();    

// Retrieve the Billing Profile and load the reference object
billingProfile.set(BPConnection.BillingProfile.retrieveFiltered("AccountId = " + BPSystem.nodeKey ).single());

-------------------------------------------HTML----------------------------------------------
<BPUI.InputField name="BillingProfileEmail" variable={billingProfile}  field="Email"/>

 

BPUI.OutputField

The OutputField tag is used to add read-only form elements without having to write any HTML. The Output field can be used to render any of the standard form controls used in the BP User Interface by manually selecting the form type. It can also be passed a reference Object and related Field to read the metadata and render the appropriate output display type automatically.

Attributes

Name   Description
field String Name of the Entity Field to render
width String Width of the field
variable BPUI.ReferenceObject Variable acting as the metadata and Data source of the field
layout String
[Standard, Standalone]
Standard: Renders the control with its label and associated HTML structure
Standalone: Renders just the Control of the type specified in the metadata in read-only mode.
displayTransform Function Custom function used to format the data ex: Date format, Currency Format

Basic Tag Structure

<BPUI.OutputField variable={referenceObjectVar}  
                  field="ObjectFieldName" 
                  label=”overrideFieldLabel”                
                  displayTransform={yourCustomFormattingFunction}
                  layout=”[Standard,Standalone]”/>

Example

Explicit definition of the field, its type and data. Will render the Read-only version

-------------------------------------------JavaScript---------------------------------------
// Manually load set of option values using a JSON array
var radioOptions = new BPUI.ReferenceObject({value:"value 1",values:["value 1","value 1","value 3"]});
    
-------------------------------------------HTML----------------------------------------------
<BPUI.OutputField variable={radioOptions} type="RADIO_GROUP_VERTICAL" label="My Radio Options"/>

Loading Metadata from the BPOBject and Related Entity Field rendered in Read-only mode

-------------------------------------------JavaScript---------------------------------------
//Declare a reference object to bind to the BPUI tag
var billingProfile = new BPUI.ReferenceObject();    

// Retrieve the Billing Profile and load the reference object
billingProfile.set(BPConnection.BillingProfile.retrieveFiltered("AccountId = " + BPSystem.nodeKey ).single());

-------------------------------------------HTML----------------------------------------------
<BPUI.OutputField name="BillingProfileEmail" variable={billingProfile}  field="Email"/>

 

BPUI.TableColumn

Child of a BPUI.EmbeddedList,BPUI.Grid

Attributes

Name   Description
style string explicit, inline styles
name string name of the component
className string css class names
width string width of the column
variable BPUI.ReferenceObject BPUI.ReferenceObject can contains Entity,Value of Collection depends from context
editable boolean editable or not
index number Tab index
layout String
[Standard, Standalone]
Standard: Renders the control with its label and associated HTML structure
Standalone: Renders just the Control of the type specified in the metadata.
inputMode String showOnClick: Shows the data without the associated, html input control until the user clicks on the cell. Once the user clicks the cell then the control is rendered.
howAlways: Always displays the control associated with the element referenced in the tableColumn tag. This is the default setting.
disabled: Shows the associated control in a disabled mode.

Basic Tag Structure

<BPUI.TableColumn variable={referenceObjectVar}  
                  name="ObjectFieldName" 
                  label=”overrideFieldLabel”
                  onUpdate={yourCustomFunction}
                  displayTransform={yourCustomFormattingFunction}              
                  index=”1”/>

Example

--------------------------------HTML--------------------------------------------------
<BPUI.EmbeddedList variable={activities} name="activities" width="100%" 
                   onCellBlur={calculateAmount} onAdd={addActivity}>
             <BPUI.TableColumn name="ActivityDate" type="DATE_SELECTOR" 
                               displayTransform={formatDate} index="1" label="Service Date" />
             <BPUI.TableColumn name="ProductId" index="2" label="Product"/>
             <BPUI.TableColumn name="Quantity" index="3" label="Quantity"/>
             <BPUI.TableColumn name="Rate" index="4" label="Rate"/> 
             <BPUI.TableColumn name="RatedAmount" index="5" label="Amount" editable="false"/>
</BPUI.EmbeddedList>
--------------------------------JavaScript--------------------------------------------
//Declare a reference object to hold the Invoice and Line Items and bind them to the UI
window.activities = new BPUI.ReferenceObject();

//create a query for the Activities associated with the selected invoice  
var bpql = "select ProductId,"
                      + "SubscriptionFromDate, "
                      + "SubscriptionToDate, "
                      + "RatedAmount,"
                      + "ActivityDate, "
                      + "Quantity, "
                      + "Rate, "
                      + "RateOverride "
                 + "from Activity "
                 +"where InvoiceId = "+invoiceId
                 +" order by ActivityDate";

//Load the Activities ReferenceObject from the database 
activities.set(BPConnection.Activity.query(bpql).collection());

//Date Formatting for the ActivityDate Table Column
function formatDate(val) {
    if (val) {
       return moment(val).format('MM/DD/YYYY');
    } else {
       return val;
    }
};

The image above shows the sample BPUI.EmbeddedList rendered in the browser. Notice that the metadata about each field is interpreted in the BPUI.TabeColumn to render the appropriate control type for the referenced entity and field.

 

BPUI.Grid

Example

<BPUI.Grid treeView="true" height="700"  name="packages" 
           expandColName="Name" 
           parentField="ParentPackageProductObj.Id" 
           leafField="Package_ProductParentPackageProductObj..Id" keyField="Id" 
           mapperFunc={packageDataMapper} >
              <BPUI.TableColumn name="ProductId" variable="ProductObj.Id" label="" hide="true">
              </BPUI.TableColumn>
              <BPUI.TableColumn name="Id" index="Id"  label="Id" hide="true"></BPUI.TableColumn>
              <BPUI.TableColumn name="PACKAGEID" variable="ProductObj.Id" index="PackageObj.Id"  
                                label="PackageObj.Id" hide="true"></BPUI.TableColumn>
              <BPUI.TableColumn name="Name" resizable="true" width="250" variable="ProductObj.Name" 
                                label="Name" cellattr={function (rowId, tv, rawObject, cm, rdata) {
                                return 'style="white-space: no-wrap !important;"'
                                }} ></BPUI.TableColumn>
              <BPUI.TableColumn name="NameRaw" variable="ProductObj.Name" label="NameRaw" hide="true">
                                </BPUI.TableColumn>
              <BPUI.TableColumn name="RatingMethod" variable="RatingMethodObj.PricingType"  
                                label="RatingMethod" hide="true"></BPUI.TableColumn>
              <BPUI.TableColumn name="" variable="ProductObj.Id" label="" formatter={treeFormatter} 
                                sortable="false"></BPUI.TableColumn>
</BPUI.Grid>

BPUI.Button

Displays standard button.

Attributes

Name   Description
title string text of button
onClick function fires on click

Basic Tag Structure

 

BPUI.Link

Support all standard attributes style etc.

Attributes

Name   Description
href function,string Can be string or function
text String Value of link

Example

<BPUI.Extension>
       <BPUI.Link href={testexample} text="Click me" />
</BPUI.Extension>
function testexample() {
    alert("HI!");
}

 

Applying Inline JavaScript

The toolkit provides the ability to incorporate custom javascript inside within and around the BPUI tags. We can think about adding Javascript like a function call and everything inside {} is the result object. There are limitations to what can be used within the context of the inline Javascript. For example you can’t assign variables and you can’t use explicit loops. Below is an example of loading the options in a select control from a variable collection called “dorpBox” and assigning an event handler to the onChange event called “onPackageChange”.

<select id="packageSelect" style={{width: "120px"}} onChange={onPackageChange}>
{
      dropBox.map(function (elem, i) {
        return (<option value={elem.PACKAGE_ID}>{elem.PACKAGE_NAME}</option>)
      })
}
</select>

All javascript executes within the current execution scope so you don’t need to assign functions to a global scope. The following illustrates the use of Javascript to render different Tag elements based on the current view mode of the app.

<BPUI.Extension>
{window.BPUI.viewMode == "U"||window.BPUI.viewMode == "N"  
     ? <div id="map1" 
     style={{width: "500",height: "500"}}>Chose your input wisely!</div> 
     : <div id="map2" 
     style={{width: "500",height: "500"}}>Enjoy Viewing this Record!</div>
}</BPUI.Extension>
Have more questions? Submit a request

Comments

Powered by Zendesk