Vue.JS Integration with Console UI

overview the console ui sdk helps developers integrate console ui components into their applications, such as authentication, headers, sidebars, and modals these components make it easier for users to navigate and access content this guide outlines the integration of the console ui sdk with your application using the vue js library to begin, developers should install the “ console ui vue ” package in their projects this package includes all the essential components and utilities for seamless integration 📘 note note console ui is built using vue js 3, and hence it is not compatible with earlier versions step 1 installation to install the package, navigate to your project directory in your terminal and run the following command npm install npm install @os1 platform/console ui vue this command adds the console ui sdk to your project's dependencies, enabling developers to import and utilize it within their application 📘 update console version update console version you can also run the npm install @os1 platform/console ui vue command to update console to the latest version step 2 integration of the sdk start the integration process by importing the os1provider component from the library this component acts as a context provider, granting child components access to console ui features see the vue js example of how to integrate the sdk below \<script> import { os1provider } from '@os1 platform/console ui vue'; const getconsoleinit = (event\ any) =>{ consoleinit value = event; // here consoleinit is ref which listens to an event of console ui } \</script> \<os1provider clientid=`sampleclientid` // this is the clientid that you get after creating an app loginredirectpath='/abc' // path that will be given when someone logins into the console ui for the first time logoutredirectpath='/' //path that needs to be redirected when someone logouts from your application devtenantid='tenantid' // this is an optional parameter that needs only to be passed when used in development mode appid='solutionname appid' //initial appid on which you want to land when loading the console ui for the first time @consoleinstance = "getconsoleinit" //here function gets the value of an event that is passed from console ui and assigns its value to a variable so that it can be used in the client’s application \> step 3 providing controls developers can provide injectable controls for headers, sidebars, or navigation bars by binding them to os1provider according to business requirements import { os1provider } from "@os1 platform/console ui vue"; const controls = \[{ type "autocomplete", //type can be textbox,textboxbutton,dropdown, searchbox, autocomplete width 100, // width as a percentage of the maximum width that is assigned to the injectable component placeholder "search items", // placeholder text id "autocomplete1", //unique id which distinguishes it from other injectable controls float "left", // option to align items left or right functionboundoption autocomplete(), // function that returns the value as an array of objects in the form of \[{ value string, text string }] }] \<os1provider clientid=`sampleclientid` loginredirectpath='/abc' logoutredirectpath='/' devtenantid='tenantid' appid='solutionname appid' \ controls = "controls" @consoleinstance = "getconsoleinit" \> 📘 note note it's important to note that a maximum of 3 injectable controls are allowed, each assigned a unique id learn more about how to configure different injectable controls s tep 4 adding the toast component render the toast component on your webpage using the toast function each configured toast component must have a unique element id shown below is an example of configuring a toast component const toastconfig = { bgcolor "yellow", // background color of the toast \[green, red, yellow,black, white] message "operation successful", // message that will be shown inside the toast \[128 character limit] timeout 10, // time in seconds after which the toast will disappear icon "error", // icon that will be appearing before the message \[info, error, warning, success, failure, none] closebutton true, // denotes whether the close button will be present on the right of the toast } \<os1toast elementid="toastelement" \ toastconfig="toastconfig" /> step 5 adding the modal component use the modal function to configure modal components on your webpage listen for a button click event; the event details will contain the modal element id see the example below for configuring a modal component const modalconfig = { title 'deactivate', // title of the modal \[96 characters limit] message 'do you want to continue?', // message that will be appearing on the modal icon 'info', // icon that will appear along with the message \[info, error, warning, success, failure, none] buttons \[ //maximum two buttons allowed { id 'button element 1', // unique id of the button backgroundcolor 'green', // background color of the button text 'cancel', // text appearing on the button event 'upevent', // unique name of the custom event that will be triggered on click }, ], }; \<os1modal elementid="modalelement" \ modalconfig="modalconfig" />; step 6 using a variable use a variable containing the emitted event value from the console ui this variable can be combined with the current instance to listen for events emitted by injectable controls const { consoleinstance } = props; if (consoleinstance) { consoleinstance eventbus() on(props consoleinstance events() onchangeevent, e => window\ console log(e)) } 📘 note note currently exposed events for injectableids are onchangeevent, onblurevent, onscrollevent, onclickevent, onfocusevent, and onsearchevent use the os1httpclient class to create its instance and then use that instance to call the api incorporate the authinitializer property from consoleuicontext as a constructor parameter import { os1httpclient } from '@os1 platform/console ui vue'; setup(props any) { let consoleinit = ref(); watch( () => props consoleinstance, (newconsoleinstance) => { consoleinit value = new os1httpclient(newconsoleinstance authinitializer, 'https //os1devs sandbox getos1 com') } ); } step 7 configuring headers utilize the rest api method on the instance created for the os1httpclient this automatically configures headers for requests originating from networkclient , adding an access token, tenant id, user info, or auth token headers to the actual request withaccess withtid withuserinfo withauth note by default, all of these headers are set to true to exclude them from the request, provide the value as false against these headers the access token is verified and, if expired, regenerated each time an api request is initiated the x coreos userinfo header includes the userid, and the x coreos auth header contains the id token if the developer wants to use x coreos request id , they can pass the requestid parameter as undefined this header is generated by the library and requires sending request headers const handleclick = () => { //here consoleinstance is the state variable of consoleuicontext; if (props consoleinstance) { const reqheaders any = { withaccess false, withtid false, withuserinfo false, withauth false, }; consoleinit get(`/users`) then(response => { console log("api response", response data) }) catch(function (err) { console error('error', err); }); //this example covers cases when requestid is generated from the console and requestheaders are passed consoleinit post(`/todos`,{ "todo" "study" }, undefined, reqheaders) then(response => { console log("api response", response data) }) catch(function (err) { console error('error', err); }); }; }; using the help button click on the “need help” button to query about any application or to use the product guide click on the “raise a ticket” button and use the “contact us” page, to query about any application the text area is available to describe the issue in detail additionally, upload screenshots if any, as it may help to understand the issue once the query along with the details is received the support team will contact the developer click on the “product guide” button to learn about the product changing time zone developers can change the application's timezone by using the function provided by console ui the converttime function converts time, while currenttimezone retrieves the current timezone when the timezone is updated, the updatetimezoneevent is emitted converttime function is exposed to the developers, it converts the time of the developer’s application in their desired format, and currenttimezone function gives the developer the current timezone that is stored in the browser when timezone is updated it emits an updatetimezoneevent event if (props consoleinstance) { console log( props consoleinstance converttime('2014 06 01 12 00', 'mm dd yyyy hh\ mm\ ss') ); // in this 2nd parameter i e format in which we want to convert time is optional console log(props consoleinstance currenttimezone()); } step 8 generating access token to generate an access token, developers can use the getauthenticationtokens method for user info, the getuser method can be used authentication status can be checked using isauthenticated (), calling the authinitializer method from the console ui context if (props consoleinstance) { const accesstoken = await consoleinstance authinitializer getauthenticationtokens(); const userinfo = await consoleinstance authinitializer getuser(); const isuserauthenticated = await consoleinstance authinitializer isauthenticated(); } configuration for injectable controls offered certain standard parameters are passed to all injectable controls type specifies the type of injectable control (e g , textbox, textboxbutton, autocomplete, dropdown, searchbox) width defines the maximum percentage width placeholder displays placeholder text id a unique identifier for the control float an optional parameter indicating the component type how to configure different injectable controls in the console ui here, configurations for different injectable controls are provided up to 3 injectable controls can be used textbox configuration for adding a "textbox" in console ui, emitting onchange and onblur events { type "textbox", width 100, placeholder "search package", float "left", id "textbox1" attributes { maxlength "50"; } } note here, “ attributes ” is an optional parameter that holds an object defining whether any attributes should be assigned to injectable controls onchange and onblur events are emitted by this injectable control textboxbutton configuration for adding a "textboxbutton", allowing customization of button appearance { type "textboxbutton", width 100, placeholder "search package", float "left", id "textboxbutton1" attributes { maxlength "50"; } button true, buttontext "search", buttoncolor "red" } note the default value of the button is false developers can change the value to true for adding a textboxbutton and can provide buttontext and buttoncolor, to specify the outlook of a button here, “ attributes ” is an optional parameter that holds an object defining whether any attributes should be assigned to injectable controls onchange is emitted when the developer changes the text in the input box and onclick is emitted when the user clicks on the button searchbox configuration for adding a "searchbox" with a lens icon { type "searchbox", width 100, placeholder "search package", float "right", id "searchbox1" attributes { maxlength "50"; } lensicon true } note lensicon is an optional attribute, if it is set to true then lensicon will display itself in injectable control here, “ attributes ” is an optional parameter that holds an object defining whether any attributes should be assigned to injectable controls onchange, onblur, and onfocus are the events that are emitted on the input box, developers can use these events as per their app requirements autocomplete configuration for adding an "autocomplete" control with dynamic options { type "autocomplete", width 100, placeholder "search package", float "right", id "autocomplete1" functionboundoption autocomplete(), // this field can be a function that returns an array of objects or a normal array of objects in the form of \[{ value string, text string }], } note the functionboundoption is passed when options are static and they can be passed in the form of \[{ value string, text string }] the developer can declare this as the value of this field or can pass the function that returns the value in the above mentioned format for setting options dynamically, the developer can set the hasasyncfunctionboundoption then, call functionboundautocompleteoption from @os1 platform/console ui react and pass an array of objects and id of autocomplete as parameters to that function import {functionboundautocompleteoption} from '@os1 platform/console ui react'; if (consoleinstance){ functionboundautocompleteoption(autocompletevalues,"autocomplete1" ) // here firstparament is a variable that contains the array of objects that needs to be present in the dropdown the second parameter contains the id of the dropdown on which we want to load the values } onchange, onblur, onclick, and onscroll are the events that are emitted on the input box developers can use these events as per their app requirements dropdown configuration for adding a "dropdown" control with options, including initial values { type "dropdown", // type of injectable control width 100, // maximum width in percentage that can be given placeholder "search package", // placeholder text float "right", // aligning the injectable control in the left or right direction id "dropdown1" // unique id that can be given to injectable control functionboundoption \[{ value "1", text "mobiles" },{ value "2", text "laptops" }], // this field can be a function that returns an array of objects or a normal array of objects in the form of \[{ value string, text string }], } note the functionboundoption is passed when options are static and can be passed in the form of \[{ value string, text string }] developers can declare the string & text as the values of this field or can pass the function that returns the value in above mentioned format to establish dynamic options, developers can configure the hasasyncfunctionboundoption parameter post that, they can call the functionboundoption from @os1 platform/console ui react , passing an array of objects and the dropdown's id as parameters to the function to set the initial value of a dropdown, use os1dropdowndefaultvalue from @os1 platform/console ui react by providing the dropdown's value and id this can be passed only when an instance of console ui is accessible or once console ui has been loaded import { functionboundoption, os1dropdowndefaultvalue} from '@os1 platform/console ui react'; if (consoleinstance){ functionboundoption(dropdownvalues,"dropdown1" ) //here, firstparament is a variable that contains the array of objects that need to be present in the dropdown the second parameter contains the id of the dropdown on which we want to load the values os1dropdowndefaultvalue('initialvalue', "dropdown1"); // here first parameter contains the value that needs to be passed as initialvalue, second parameter is the id of the dropdown on which id, needs to be set } onchange, onscroll, onclick, and onsearchevent are the events that are emitted on the input box, developers can use these events as per their app requirements