openui5-licensecode_input
An OpenUI5 library to enter a license code, registration code or ...
Description
This control enables you to split the input of a lengthly structured user input into a number of small chunks.
Often your user has to enter a registration code, license code, security code, ... which consists of a lengthly string
with a lot of special characters ($%&-...).
Lets assume the code has 16 characters and looks like this:
A§$%G_()#Rjy%6/_
It's most likely that the user will fail one or more times and get's in a bad mood even before using your software.
It's much easier to enter the string in 4 chunks of 4 characters:
A§$%
- G_()
- #Rjy
- %6/_
The licensecode_input
control helps you with this. You define how many chunks you need and how many characters each chunk contains and
the control create the number of inner controls with a corresponding maxlength property.
In the end you (as a developer) ask the control for the value and get the data of the chunks as the lengthly string you need.
Of course there is the sap.m.MaskInput
which does something similar. But that control always needs a placeholder character which than can't
be part of the license code. In my customer application I needn't a control without this restriction. Btw. my control is a bit more responsive
cause it wraps the inner controls into new lines if there is not enough space
Demo
You can check out a live demo here:
https://htammen.github.io/openui5-licensecode_input/demo/webapp/index.html
Project Structure
- demo - Library's live demo
- dist - Distribution folder which contains the library ready to use
- src - Development folder
- test - Testing framework for the library
Getting started
Installation
Install openui5-licensecode_input as an npm module
$ npm install openui5-licensecode_input
Configure manifest.json
Add the library to sap.ui5/dependencies/libs and set its path in sap.ui5/resourceRoots in your manifest.json file, as follows:
{
"sap.ui5": {
"dependencies": {
"libs": {
"openui5.licensecode_input": {}
}
},
"resourceRoots": {
"openui5.licensecode_input": "./FOLDER_WHERE_YOU_PLACED_THE_LIBRARY/openui5/licensecode_input/"
}
}
}
How to use
Add openui5-licensecode to your UI5 view:
<mvc:View controllerName="htammen.demo.openui5.licensecode_input.controller.App" displayBlock="true"
xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:license="openui5.licensecode_input">
<Shell>
<App>
<Page title="{i18n>TITLE}">
<content>
<VBox class="sapUiMediumMargin">
<FormattedText htmlText="{i18n>demo.description}"/>
<Label text="Enter a license code with 4 controls. Each control contains 4 chars. So in sum the license code is 16 chars long" class="sapUiLargeMarginTop"/>
<HBox alignItems="Center" alignContent="SpaceBetween">
<license:LicenseCode id="licenseCode0"
value="{path: '/licenseCode0'}"
valueStateText="Enter a license code with 16 characters">
</license:LicenseCode>
<Label text="LicenseCode Value:" vAlign="Bottom" class="sapUiResponsiveMargin"/>
<Text text="{path: '/licenseCode0'}" class="sapUiTinyMarginBeginEnd"/>
</HBox>
</VBox>
</content>
<footer>
<Toolbar>
<Button id="btMessagePopover" icon="sap-icon://message-popup" type="Reject"
visible="false" press="onMessagePopoverPress"/>
<ToolbarSpacer/>
<Button icon="sap-icon://save" text="Save" press="onSave" />
</Toolbar>
</footer>
</Page>
</App>
</Shell>
</mvc:View>
Control Parameters
Name | Type | Default | Description |
---|---|---|---|
value | string | null | Value of the control. |
valueState | sap.ui.core.ValueState | None | valueState of the controla |
valueStateText | string | null | Text to display under the control if validation of value failed |
controlCount | int | 4 | Number of inner controls (input fields) to display and use for this control |
singleControlLength | int | 4 | Length of each inner control (input field). Means: how many characters are allowed in each input field |
Run demo locally
To run the demo application locally after you have cloned the repo to your local computer you should
npm install
npm run build
npm run demo
Author
Helmut Tammen
License
This project is licensed under the MIT License - see the LICENSE file for details