In this post, we will show you how to define a Custom Element with Smart Framework. We will create a Material Color Picker custom element.
1. Define the Custom Element. To define a new custom element with Smart Framework, we need to call the Smart function with two parameters - the tag name and the Class with the logic.
Smart('smart-colors', class SmartColors extends Smart.BaseElement {
}
2. Smart Framework gives us useful things like Templates, Data Binding, Typed Properties, Lifecycle callbacks, Event Handling. Read more about this https://www.htmlelements.com/docs/base-element/. In our Custom Element, we will use some of these features. We will use the 'ready' lifecycle callback. It is invoked once, when the element is attached for first time. We use this function to create and initialize the custom element. The 'properties' definition includes a property called 'color'. This property has default value - '#fff' and its type is 'string'. This means that when you try to set a 'bool', 'date', 'numeric' value, the element will throw an error with 'Invalid property type'. To raise the 'change' event, we use the '$.fireEvent' method.
The latest version of Smart HTML Elements brings important new features to our Smart Grid Web Component. It is now possible to display data hierarchies in the web component. The Grid allows you to display data as a combination of Tree and Grid. The Tree Grid mode has full support for data sorting, data filtering and data editing. The Grouping features allows you to group data by columns. The context menu feature allows you to quickly add a context menu functionality to the Grid.
Tree Grid
Tree Grid mode allows you to display hierarchical data in the Grid and make the component work like a hybrid between Tree and Grid.
This post shows how to create a Grid Web component and initialize it from a DIV tag
The next version ver3.1.0 of Smart HTML Elements will introduce an alternative way to create a Web Component on demand from an existing HTML Element.
Let's look at the sample below. In the 'index.htm' web page code, we see a HTMLDIVElement(DIV tag) with id="grid". We will use that HTML element to create a new Grid Web Component instance.
The 'index.js' file is defined as a Javascript Module. In that module our grid web component is created on window.onload, within a function called 'init()'. That is achieved by calling the Smart.Grid function and passing as a first argument the 'id' of the DIV tag and as a second argument the initialization object with the Grid web component's dataSource, columns and other configuration options. As a result, our DIV tag is replaced with a 'smart-grid' tag and a Grid is displayed.
That approach is useful, when we want to update an existing application with minimum changes or to create a Smart Web Component on demand with ES6 code.
The latest version of Smart HTML Elements, brings a full featured Chart Custom Element with more than 30 different Data Visualization options. The Chart Types supported are listed: Chart Types.
Our Chart Custom Element is written in JavaScript and CSS. It does not depend on any other third-party scripts. The rendering is achieved with SVG and HTML5 canvas. The Chart works well on mobile browsers and is the most feature-complete chart available in the web components world. Data displayed on the Chart can be formatted in multiple different ways. For example, the charting element has a property called 'formatSettings' with the following data formatting options.
decimalSeparator - character used as a decimal separator. If not specified, the default separator is '.'
thousandsSeparator - character used as thousands separator. Default value is ','
decimalPlaces - number of digits after the decimal separator. Default value is 2 for floating point numbers.
negativeWithBrackets - boolean which specifies whether to display negative numbers in brackets. Default value is false.
prefix - any string which will be added as a prefix. Default value is empty.
sufix - any string which will be added as a sufix. Default value is empty.
dateFormat - optional date format string. This property is applicable only when displaying Date objects.
The image below illustrates the Axes supported by the custom element. Smart.Chart has two main types of axes - valueAxis and xAxis. Typically the valueAxis represents the vertical axis in the chart although you may choose to rotate the axes and in this case the valueAxis will be displayed horizontally.
Smart.Chart also ships with 32 built-in color schemes which are used to automatically set colors for different series. You can change the color scheme by setting the colorScheme property of the chart. The available value are from 'scheme01' to 'scheme32'. By setting its 'theme' property, users can Data Visualize their graphics in 'Light' and 'Dark' mode. Smart.Chart is based on: jqxChart.
We invite you to look at our Chart Custom Element demos: Chart overview
This post shows how to bind to the Grid Web Component events. The code below initializes the Grid instance and binds to the 'click' event. Within the event handler, we can get details about which part of the Grid was clicked - Cell, Row or Column. This is achieved by utilizing the 'event.path' array. It is also important to note that each Data Grid Column has 'data-field' attribute and each Row has 'data-id' attribute. The data source, which is used in the example is available in the 'data.js' file from the download package.
Smart('#grid', class {
get properties() {
return {
dataSource: new Smart.DataAdapter(
{
dataSource: getCountriesData(),
dataFields:
[
'ID: number',
'Country: string',
'Area: number',
'Population_Urban: number',
'Population_Rural: number',
'Population_Total: number',
'GDP_Agriculture: number',
'GDP_Industry: number',
'GDP_Services: number',
'GDP_Total: number'
]
}),
columns: [
'Country',
'Area',
'Population_Rural',
'Population_Total',
'GDP_Total'
]
}
}
});
window.onload = function() {
grid.addEventListener('click', function(event){
const path = event.path;
let cell = null;
let row = null;
let column = null;
for(let i = 0; i < path.length; i++) {
const node = path[i];
if (node.nodeName === 'SMART-GRID-CELL') {
cell = node;
}
if (node.nodeName === 'SMART-GRID-ROW') {
row = node;
}
if (node.nodeName === 'SMART-GRID-COLUMN') {
column = node;
}
}
if (row) {
alert(row.getAttribute('data-id'));
}
if (column) {
alert(column.getAttribute('data-field'));
}
if (cell) {
alert(cell.innerText);
}
});
}
The newest version of our framework marks the availability of a new AutoComplete Input tag. We needed such lightweight component for the purposes of our Grid web component. There, it is used as an inline cell editor. You can check it out here: grid-editing-cell-auto-complete.
Here is how the web component looks like when you add it to your web page:
All you need to do is to add a reference to smart.elements.js, smart.default.css and type the following:
<smart-input data-source="[South America, North America, Asia, Africa, Europe]"></smart-input>
Our Web Components library has a feature, which allows you to dynamically extend a Custom Element with additional behaviors. We call them Modules. To add a new module, you have to call the 'addModule' method. In this blog, we will show you how to create a new module, which adds a 'color' property to a Custom Element. We will call it 'ColorModule'.
The 'ColorModule' defines a 'color' property. The default property value is 'red'. Whenever the 'color' property is changed, the 'setColor' method is invoked which applies the Color to the element. The below code adds the Module to the 'smart-toggle'button' Custom Element.
window.Smart.Elements.whenRegistered('smart-toggle-button', function (proto) {
proto.addModule(ColorModule, true);
});
Note that the second parameter is 'true'. This means that our 'ColorModule' will be added to all sub-classes of the 'smart-toggle-button' i.e 'smart-radio-button', 'smart-check-box' and 'smart-switch-button'. All these custom elements will have the 'color' property. Usage example:
If you need to get the Path to the current Javascript file being executed, you can use this small function:
const location = (function () {
if (document.currentScript) {
let link = document.currentScript.src;
let lastIndex = link.lastIndexOf('/');
link = link.substring(0, lastIndex);
return link;
}
})();
In our code base, we use it to dynamically load Component dependencies.
One of the new additions to our Javascript Grid Web Component is the capability to load very large data sets. Example: Grid Large Data Set. In the example, we demonstrate how to load 50,000 rows and 1,000 columns. This can be achieved due to the built in Fast Data and User Interface virtualization. We create HTML Elements only for the View and update them while user scrolls. The Grid is also in unbound mode and the demo is created by using this code:
To create it in unbound mode, we need to set the dataSource and dataFields properties to Numeric values which determine the Rows and Columns. The "onCellRender" callback function allows us to render cell values on demand when the cell is in the view. The Data in the example is Client Side data. If you have an application scenario, where you need to use larger data sets, our Grid offers a solution for that due through the Virtual Data Source. Check out: Grid Demos.
