Elektron Tauon Controls module
Welcome to the Elektron Tauon Controls module.
This module provides ready to go controls for elektron solutions.
There are currently 2 controls available in this module:
- SPImagePicker: Allow you to select a file from SharePoint by opening the OOTB assets picker and return the url of the selected file.
- SPTaxonomyPicker: Allow you to select terms from the SharePoint Taxonomy service by leveraging the OOTB taxonomy picker.
General Behavior
SPImagePicker
To use this control, import the SPImagePicker from this module:
import { SPImagePicker } from 'elektron-tauon-controls';
Instanciate the control using the constructor:
const spImagePicker = new SPImagePicker('container-id', 'default/folder/url');
The first parameter is the Id of the HTML element containing the control. The second parameter is optional. It allows the user to define a default location when the picker opens.
To render the control, call the Render() method like so spImagePicker.Render();.
To get the url of the selected asset, use the ImageUrl property of the control: const imageUrl = spImagePicker.ImageUrl;
To set the url of the selected asset, use the SetValue('value') method of the control: spImagePicker.SetValue('/url/of/image.jpg');
SPTaxonomyPicker
To use this control, import the SPImagePicker from this module:
import { SPTaxonomyPicker } from 'elektron-tauon-controls';
Instanciate the control using the constructor:
const spTaxonomyPicker = new SPTaxonomyPicker('My Field Name', 'container-id', false);
The first parameter is hte name of the taxonomy field you want to bind the control to. The second parameter is the Id of the HTML element containing the control. The last parameter is optional. It allows the user to define if the control allows the selection of multiple taxonomy values in the control.
To render the control, call the Render() method like so spTaxonomyPicker.Render();
To get the selected taxonomy values, use the GetTaxonomyValues() method of the control: spTaxonomyPicker.GetTaxonomyValues();. Returns an array of SPTaxonomyValues objects.
To get the label of the taxonomy values, use the GetDisplayedValues() method of the control: spTaxonomyPicker.GetDisplayedValues();. Returns an array of string with the label of the selected taxonomy values.
To set the selected taxonomy values, use the SetValues(values:SPTaxonomyValues[]) method of the control: spTaxonomyPicker.SetValues(taxonomyValues)..
SPTaxonomyValue
This class defines a wrapper to the SharePoint taxonomy values. This class has a contructor and two properties. The SharePoint taxonomy values structure is defined as followed: 'Label|Guid';
The constructor takes a string with the previous format as parameter: new SPTaxonomyValue('label|guid-of-term')
The first property Label returns the associated label of the taxonomy term.
The second property TermId retuns the id of the taxonomy term.
Getting Started
Tools
- latest current version of NodeJs
- We recommend using Visual Studio Code as a lot of settings are pre-configured for it.
Having your environment ready
npm i typescript tslint -g
Installing the dependencies
npm i
Building
npm run build
Debugging
Run this command from this repo:
npm link
(npm unlink to undo)
Create a project using the generator.
Run this command from the debugging repo:
npm link elektron-tauon-controls
(npm unlink elektron-tauon-controls to undo)
Publishing
Please refer to the following documentation
Continuous integration
Please refer to the following documentation
static analysis url.
No unit testing in place at the moment.
Contributing
Please refer to the following documentation
repo url