📝

Autofilling Forms Across Pages

Introduction

A common use case of PixieBrix is updating records across systems. Before PixieBrix, the user would do this by copy/pasting information from tab to tab. With PixieBrix, you can send data between the tabs and use that information to fill/submit forms

There are two approaches to sending data between pages:

  • Approach #1: the form fill action runs in the context of the page with the form, and requests information from the tab that opened it
  • Approach #2: the action runs in the context of the original tab, opens a new tab, and sends a form fill action to that tab

Which approach you take will depend on the native behavior of the application.

If the native interface already includes a mechanism for opening the form (e.g., the user clicks a link), Approach #1 is preferable.

However, if the user normally manually opens a new tab to enter the information, Approach #2 is preferable, also placing a button or menu item on the page for the user to trigger the action

Approach #1: Reading data from the opening page

To read data from the opening page, you can invoke a reader as an action in opening tab using the window: opener directive

ℹī¸

To ensure PixieBrix can run the reader in the opening tab include a permissions: directive in the blueprint. When installing the blueprint, the user will be prompted to grant PixieBrix permissions for origins matching that URL

permissions:
	origins: "https://*.lightning.force.com/lightning/r/Case/*"
extensionPoints:
  # A trigger that runs when the Jotform is loaded
	- id: "@tutorial/jotform/form-load"
	  label: Fill form on load
	  config:
			action:
				- id: "@tutorial/salesforce/case-reader"
			  	outputKey: case
					window: opener
					config: {}
				- id: "@pixiebrix/forms/set"
	        config:
	          inputs:
								- selector: 'label:contains("Request") + div textarea'
	                value: "ESCALATE {{ @case.caseNumber }} - Reason: {{ @case.caseSubject }}"

Approach #2: Opening a new tab and running an action on that tab

In this approach, we place a button on starting page that opens a new tab using the @pixiebrix/browser/open-tab action. We can then fill a form on that tab using the @pixiebrix/form-fill brick with window: target to run the action in the context of the opened tab.

ℹī¸

To ensure PixieBrix can run the action in the target tab include a permissions: directive in the blueprint. When installing the blueprint, the user will be prompted to grant PixieBrix permissions for origins matching that URL

permissions:
	origins: "https://form.jotform.com/*"
extensionPoints:
- id: "@tutorial/form-fill-button"
	label: Open tab and fill form
	permissions:
		# Required because our other blueprint only has access to to the
		# results URL, not the search.php URL used in open-tab below
		origins: https://tloxp.tlo.com/*
	config:
		caption: Enter form
		action: 
			- id: "@pixiebrix/browser/open-tab"
				# outputKey so we we keep the context before it
				outputKey: ignore
				config:
				url: "https://form.jotform.com/abc123"
			- id: "@pixiebrix/form-fill"
				window: target
				config:
					inputs:
							- selector: 'label:contains("Request") + div textarea'
	              value: "ESCALATE {{ caseNumber }} - Reason: {{ caseSubject }}"