Check Path Plugin

The Check Path Plugin enables users to query segments of the view tree for contextual rendering or behavior. This is best suited to be referenced during the UI rendering phase, where one can make decisions about the rendering of an asset based on where it lies in the tree.

Usage

Install the plugin:

npm i @player-ui/check-path-plugin

yarn add @player-ui/check-path-plugin

pnpm add @player-ui/check-path-plugin

Add it to Player:

import { CheckPathPlugin } from '@player-ui/check-path-plugin';

const checkPathPlugin = new CheckPathPlugin();
const player = new Player({ plugins: [checkPathPlugin] });

// Start your flow
player.start(myFlow);

Then use the plugin to query the view:

const isCustomThing = checkPathPlugin.hasParentContext("my-asset-id", [
  "input",
  "myCustomViewType",
]);

Install the plugin:

npm i @player-ui/check-path-plugin-react

yarn add @player-ui/check-path-plugin-react

pnpm add @player-ui/check-path-plugin-react

Add it to Player:

import { ReactPlayer } from "@player-ui/react";
import { CheckPathPlugin } from "@player-ui/check-path-plugin-react";

const rp = new ReactPlayer({
  plugins: [new CheckPathPlugin()],
});

This will automatically create the underlying core version of the CheckPathPlugin to be made available via React Context for the hooks.

In build.gradle

implementation "com.intuit.playerui.plugins:check-path:$PLAYER_VERSION"

In Player constructor

import com.intuit.playerui.plugins.checkpath.CheckPathPlugin

val plugins = listOf(CheckPathPlugin())
AndroidPlayer(plugins)

CocoaPods

Add the subspec to your Podfile

pod 'PlayerUI/SwiftUICheckPathPlugin'

Swift Usage

This plugin takes no parameters, and the configuration comes from content, it can just be added to the plugin array:

var body: some View {
    SwiftUIPlayer(
        flow: flow,
        plugins: [
          SwiftUICheckPathPlugin()
        ],
        result: $resultBinding
    )
}

API

Query

In most of the methods, the Query type is referenced. This can either be a function, string, or an object.

string - an alias for { type: '<string>' }
object - uses a partial-object match to query the object
function - a filter that gets passed an object, and returns a boolean

There are a few different functions exposed by the plugin you can use:

getParent

function getParent(id: string, query: Query | Query[]): Asset | undefined;

The getParent method allows you to query up the tree, and return the first parent that matches the given query, or undefined. If an array is passed, the tree is parsed matching on each query item from left to right. The parent object that matches the last query item is returned.

getParentProp

function getParentProp(id: string): string | undefined;

The getParentProp method returns the property on the parent object that the current object falls under. For example, an input with a text asset as the label, will return label for the parentProp of the text asset.

hasParentContext

function hasParentContext(id: string, query: Query | Query[]): boolean;

Similar to getParent, the hasParentContext method responds with the existence of a parent with the given context.

hasChildContext

function hasChildContext(id: string, query: Query | Query[]): boolean;

The compliment of hasParentContext, hasChildContext traverses down the tree for any path from the given node that satisfies the context requirements.

The API for the React version of the CheckPathPlugin is similar to the core version, just exposed through React hooks for easy use in custom assets:

function useGetParent(id: string, query: Query | Query[]): Asset | undefined;
function useGetParentProp(id: string): string | undefined;
function useHasParentContext(id: string, query: Query | Query[]): boolean;
function useHasChildContext(id: string, query: Query | Query[]): boolean;

Example

import { useHasParentContext } from "@player-ui/check-path-plugin-react";

export const MyAsset = ({ id }) => {
  // If the asset is rendered within a form, render as a select instead of a radio button
  const isInForm = useHasParentContext(id, "form");
  return isInForm ? <Select /> : <RadioGroup />;
};

Swift Usage

The SwiftUICheckPathPlugin attaches the BaseCheckPathPlugin named checkPath to the root of the SwiftUI view tree as an environment value, so when included any asset can use that environment value to access the base functionality

struct MyAsset: View {
    @ObservedObject var viewModel: AssetViewModel<AssetData>
    @Environment(\.checkPath) var checkPath

    var body: some View {
       let isInForm = checkPath?.hasParentContext(id: viewModal.data.id, query: "form")
       if isInForm {
         SelectChoice()
       } else {
         RadioGroup()
    }
}