Initialization Issue - Custom floating window

Hello,

I am trying to work with Custom floating window, For that I have checked the SDK.

But not sure how to Initialize it with my HTML page, can you please help me out?

I have tried below Initialization methods,
Please check them and let me know where is the issue.
Thank you.



Hi @Kumar_B,

Thank you for sharing your issue with us.

I have consulted with the developers responsible for implementing this feature, and they have requested that I share this example with you to test out:

<html>
	<head>
		<title>Custom UI: Basic HTML example</title>

		<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
		<script>
			(async function() {
				const sdk = await new AppExtensionsSdk().initialize();
			})();
		</script>
	</head>
	<body>
		<h1>Hello from Custom UI</h1>
	</body>
</html>

Can you try this and let me know if it works, please? If you encounter any difficulties, please let me know as well.

Hello,

Thank you for the reply,

I have tried your code, with execute,

<html>
	<head>
		<title>Custom UI: Basic HTML example</title>
	</head>
	<body>
		<h1>Hello from Custom UI</h1>
	</body>
	<footer>
		<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
		<script>
			setTimeout(async function() {
				console.log('timeout inside');
				const sdk = await new AppExtensionsSdk().initialize();

				const { confirmed } = await sdk.execute(Command.SHOW_CONFIRMATION, {
					title: 'Confirm',
					description: 'Are you sure you want to complete this action?',
				});

			}, 5000)();

		</script>
	</footer>
</html>

This is my HTML page, with above code. but when I open this in Pipedrive window, I am getting below error in console.

Uncaught (in promise) ReferenceError: Command is not defined
 

Thank you

Hi @Kumar_B,

I had our developers check on this. They found two errors in your code and provided a fix:

<html>
<head>
    <title>Custom UI: Basic HTML example</title>
</head>
<body>
<h1>Hello from Custom UI</h1>
</body>
<footer>
    <script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
    <script>
      setTimeout(async function() {
        console.log('timeout inside');
        const sdk = await new AppExtensionsSdk().initialize();

        const { confirmed } = await sdk.execute(AppExtensionsSdk.Command.SHOW_CONFIRMATION, {
          title: 'Confirm',
          description: 'Are you sure you want to complete this action?',
        });

      }, 5000);

    </script>
</footer>
</html>

Can you try this, please? :blush:

Hello @Nicole_Tan

It is working, but for some commands, I am getting ‘Invalid command’ error.
Like, SHOW_FLOATING_WINDOW and SET_FOCUS_MODE

My code

<html>
	<head>
		<title>Custom UI: Basic HTML example</title>
	</head>
	<body>
		<h1>Hello from Custom UI</h1>
	</body>
	<footer>
		<script src="https://cdn.jsdelivr.net/npm/@pipedrive/app-extensions-sdk@0.2.0-rc.0/dist/index.umd.js"></script>
		<script>
			setTimeout(async function() {
				console.log('timeout inside');
				const sdk = await new AppExtensionsSdk().initialize();

				await sdk.execute(AppExtensionsSdk.Command.RESIZE, { height: 500 });

				const { confirmed } = await sdk.execute(AppExtensionsSdk.Command.SHOW_CONFIRMATION, {
					title: 'Confirm',
					description: 'Are you sure you want to complete this action?',
				});

				/*
				//Getting Invalid command error for below commands
				
				await sdk.execute(AppExtensionsSdk.Command.SHOW_FLOATING_WINDOW, {
					context: {
						person_id: 42,
					}
				});

				await sdk.execute(AppExtensionsSdk.Command.SET_FOCUS_MODE, true);

				*/

			}, 5000);

		</script>
	</footer>
</html>

Thank you

This topic was automatically closed after 10 days. New replies are no longer allowed.