Advanced access to APIs

The APIs for Nutrient MAUI SDK are identical to the APIs for Nutrient Web SDK. This guide will discuss how to access Nutrient Web SDKs APIs from your MAUI application so that you can take advantage of all the functionalities of our Web SDK.

Preparing a project for advanced access

1. Create a JavaScript asset file and add it to the Raw/Assets folder of your project — for example, advanceAccess.js.

2. When initializing PDFView in XAML, add the path to the JavaScript asset file to the AdvanceAccessScriptPath property:

<pspdfkit:PDFView x:Name="PDFView" AdvanceAccessScriptPath="advanceAccess.js" .../>

Accessing APIs

There are two main types of Web SDK APIs you can use.

Adding a viewer configuration

To add a configuration that will be used to initialize the viewer, you can add a constant named advanceConfiguration to the advanceAccess.js file. For example:

const advanceConfiguration = {
	enableHistory: true,
	disableMultiSelection: true,
	preventTextCopy: true,
};

You can find all the configurations available in the configuration class of the Web SDK here.

Accessing APIs available in the instance class

To access the APIs available in the Instance class of Web, first access the object of the Instance class for the current document using PSPDFKit.Maui.MauiBridge.currentDocument. Then, for example, if you want to remove the export PDF button from the main toolbar using the setToolbarItems method, use the following code:

function removeExportButton() {
	const currentDocument = PSPDFKit.Maui.MauiBridge.currentDocument;
	const items = currentDocument.toolbarItems;
	currentDocument.setToolbarItems(
		items.filter((item) => item.type !== 'export-pdf'),
	);
}

To call this function from C# on a button click, use the following code:

private async void OnRemoveExportDocumentButtonClicked(object sender, EventArgs e)
{
	await PDFView.Controller.ExecuteJavaScriptFunctionAsync("removeExportButton", new object[] { });
}

There’s an example of advanced access to APIs in our Catalog app’s Advanced API Access example. For additional questions, get in touch with us.

Subscribing to events

Refer to the Auto Save example from our Catalog app, which demonstrates how to subscribe to a Web SDK event and get notified in the C# code when the event is fired. In this specific example, we subscribe to the document.saveStateChange event from our web SDK to automatically save the file to the original destination.

To achieve this, we create an object of NutrientEventHandler, wrap it into a DotNetObjectReference, and inject it into the JavaScript layer using the IController.ExecuteJavaScriptFunctionAsync API:

var handler = DotNetObjectReference.Create(nutrientEventHandler);
await PSPDFKitController.ExecuteJavaScriptFunctionAsync("subscribe", new object[] { handler });

This object reference is then used to call the C# method DetectedUnsavedChangesFromWeb using the invokeMethodAsync method:

function subscribe(nutrientEventHandler) {
	const currentDocument = PSPDFKit.Maui.MauiBridge.currentDocument;
	currentDocument.addEventListener(
		'document.saveStateChange',
		(event) => {
			if (!event.hasUnsavedChanges) {
				nutrientEventHandler.invokeMethodAsync(
					'detectedUnsavedChanges',
				);
			}
		},
	);
}

In conclusion, bridging APIs and events from Nutrient Web SDK with a .NET MAUI application provides developers with access to a wide range of advanced functionalities. By subscribing to specific events and utilizing methods like DotNetObjectReference and invokeMethodAsync, you can create a seamless interaction between the web and native layers. This integration not only automates tasks such as saving changes, but it also enhances the overall user experience by ensuring the application remains responsive and efficient.