Getting Started - Portfolio Manager

This step-by-step guide will quickly get you started with the Xelion Configurator - Portfolio Manager.

The goal of the Portfolio Manager is to manage the settings of the Configurator Intake and Provisioning. For example, you can configure which phones should be available during Intake, what price they should have, set defaults for departments and users, and toggle certain Xelion features used by Provisioning.

The result of the Portfolio Manager should be used as the 'settings' block of the Intake. See the JSON reference for more details on each setting.
Similar to the Configurator Intake, you can integrate this application into your pages.
Alternatively the Management interface offers an integration of the Portfolio manager and offers the ability to store your Portfolio settings for your organization. The Portfolio settings can then be retrieved using the API.

Preparing your page

Before writing any code for the element, you need to do the following preparation steps on your page:

• Include JavaScript file after CSS:

  <!-- Make sure you put this AFTER the CSS file -->
  <script src="https://testconfigurator.xelion.com/libs/xelion-portfolio/latest/js/xoc-portfolio.js"></script>

• Put a div element with a certain id where you want your Portfolio Manager to be placed:

  <div id="xelionid"></div>

Now you're ready to initialize the library and start using it.

Initialization

All that is left now is to initialize the configurator with the settings configuration. See JSON reference for all options. We have included an example configuration here, where locations have been enabled. Call the next piece of code at the end of your page, or at least after the <div id="xelionid"> tag.

<script>
	const settings = {
		features: {
			enableDefaultLocations: true,
		},
	};

	function okCallback(configuration) {
		alert("OK!\n" + JSON.stringify(configuration, null, 2));
	}

	function cancelCallback() {
		alert("CANCEL!");
	}

	XelionPortfolioManager.create({
		elementId: 'xelionid',
		locale: 'en',
		defaultConfig: settings,
		okCallback: okCallback,
		cancelCallback: cancelCallback,
	});
</script>

You should get the following result:

See this example stand-alone

You can use the result of the create function to call other functions, such as .getCurrentConfig().

Congratulations! You have successfully integrated the Xelion Portfolio Manager in your page.

Reference

.create

The create function is the entry-point of the application and starts rendering the Portfolio application on the page:

const options = {
	elementId: 'my-element-id',
	defaultconfig: defaultConfig,
	okCallback: (configuration) => {},
	cancelCallback: (configuration) => {},
	locale: "en",
};

function create(options) {...};

The options field is an object which can have the following properties:

Field	Type	Required	Description
elementId	String	Yes	Id of the html element on this page where the application should start.
defaultConfig	Object	No	Input to start the application with a predefined configuration.
okCallback	Function: (configuration) => { .. })	No	When specified, will show an [OK] button in the application, which on click will execute the specified function. The function will provide the output of the current configuration as the first parameter to the function as an object.
cancelCallback	Function: () => { .. })	No	When specified, will show a [CANCEL] button in the application, which on click will execute the specified function.
locale	String	No	When specified, will change the language of the application. Valid options are: en - UK English (default) nl - Dutch de - German

.getCurrentConfig

The getCurrentConfig function allows extracting the current state of the Portfolio application. If the configuration is invalid, an error is thrown, which can be caught with a try-catch clause.

function getCurrentConfig()

Limitations

There are some limitations to the Portfolio application.

• The application is meant to be loaded only once on a page.
• Internally the application is a React application using redux. Due to the nature of React and redux, this application might not work if the page you are integrating this configurator in is also a React/redux application.

What's next?

Don't forget to take a look at the Intake documentation and JSON reference. You can also get started with the Provisioning of your order and its API.