To create a component in a specific HTML entity, you can call the "component" method.
sdk.component(component_name:String, target:String, options:Object);
The options for each component can be a configuration of a subcomponent or a configuration of the specific content.
This is the working environment of the SDK. It is set by default to a production environment.
config = {
environment:'production'
};
The production
environment is your Live site. Use the development
environment for setup and testing, or you risk affecting your site statistics.
A component is "ready" when the base data that it needs to function is loaded. For instance, the popular
component is ready when popular content has been loaded, whereas the searchBox
component does not need any data to be ready.
To know whether or not a component is ready, you must check the untilReady
property. This is a promise that is resolved when the component is ready.
Example:
var popular = sdk.component('popular', '#popular');
popular.untilReady.then( function (response) {
// Do awesome things
});
The following component is deprecated:
• [Survey](knowledge/knowledge-js-sdk/sdk-components/survey)
You can configure subcomponents inside a component.
You can open a component or a build template inside a Inbenta modal window:
Some components contain events. This is useful to do an action when this event occurs. They are easy to use:
<component>.$on(event:String, function (<event_params>) {
// Do something awesome
});
Example:
In the example below, you create a categories
element where the selected category is "1". Then, you link this categories component to a sidebar. When a user clicks on the sidebar, it updates the categories
component with the new category and creates a console.log of the selected category.
//create component
var categories = sdk.component('categories', '#categories', {
//Configuration of this component
categoryId: 1,
//Configuration of subcomponents
contents: {
settingsToShow: ['ANSWER_TEXT'],
showRelated: true,
showDecisionTree: false,
ratings: {
elements: [
{
id:1,
label: 'Yes, it\'s perfect',
comment: false
},
{
id:2,
label: 'No, it doesn\'t help',
comment: true
}
],
}
}
});
//Link components
var categoriesSidebar = sdk.component('categoriesSidebar', '#sidebar', {selectedCategory:1});
categories.linkToCategoriesSidebar(categoriesSidebar);
//Sidebar event
categoriesSidebar.$on('categoryId', function (categoryId) {
console.log(categoryId);
})