AdvancedAppLauncherMenu API

The <AdvancedAppLauncherMenu> component provides a richer end user experience than <AppLauncher>. It is designed for use cases involving a large number of applications, with features for searching and organizing apps. Features include:

• Bookmarks
• Search and filtering
• Folders and organization

Here is a screenshot of the <AdvancedAppLauncherMenu>:

<AdvancedAppLauncherMenu> is available in the Finsemble "Flow" package. To learn more about Finsemble Flow see: Advanced Packages.

Props

<AdvancedAppLauncherMenu> accepts the props customURLValidation, beforeAddComponent and customAddComponent.

If beforeAddComponent is provided, this function will be used after validation and before adding the component to Finsemble, allowing for modification of the data before passing it on to the add function.

If customAddComponent is provided, this function will be used instead of the default add component function, allowing you to customize

Usage

The <AdvancedAppLauncherMenu> component can be used from the toolbar like so:

<ToolbarShell>
	...
	<ToolbarSection className="left">
		...
		<AdvancedAppLauncherMenu />
	</ToolbarSection>
	...
</ToolbarShell>

Example customURLValidation function:

const customURLValidation = (url: string): [boolean, string] => {
	// Response indicating an invalid url with a custom message
	return [false, "Please try again"];
};

Example beforeAddComponent function:

const beforeAddComponent = (formData: any): object => {
	formData.url = formData.url + "?customParams";
	// Modified form data will be used when creating the component
	return formData;
};

Example customAddComponent function:

const customAddComponent = (formData: any, callback: Function) => {
	// Add Custom logic here
	// Add the component to Finsemble
	FSBL.Clients.LauncherClient.addUserDefinedComponent(formData, (error: any) => {
		// Be sure to call the callback to indicate to the form the operation has completed
		callback(error);
		return;
	});
};