AisWorkflow

AisWorkflow is a convenience component. It shows either the AisWorkflowWidget component or the AisWorkflowHistory component.

The canView prop determines which component is displayed. See each component for more details on their behavior.

canView Prop

When true the AisWorkflowWidget component will be displayed.

When false or not provided, the AisWorkflowHistory component will be displayed.

It is recommended to always call the Workflow's `Get User's Allowed Package Actions` API endpoint before displaying your form page that contains the widget. The response from this endpoint is a PackageActionsDto object that contains a `canView` value. Use this value on your frontend to determine whether to display the widget or not.

See the

workflow documentation

for more details about this endpoint.

Example & Comparison

Script Setup

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { AisWorkflow, AisWorkflowHistory, AisWorkflowWidget } from '@ais-public/ais-components'
import type { PackageActionsDto } from '../types'

const packageId = ref('123456789')

const packageActionsDto = ref({} as PackageActionsDto)
const historyJson = ref('')
onBeforeMount(async () => {
  /* Your backend will need to fetch this from the Workflow API 'Get User's Allowed Package Actions' endpoint */
  packageActionsDto.value = await useAisFetch(`path/to/package/actions/${packageId.value}`)

  /* Your backend will need to fetch this from the Workflow API 'Get Package History' endpoint */
  historyJson.value = await useAisFetch(`path/to/get/history/json/${packageId.value}`)
})
</script>

Without AisWorkflow

<template>
  <AisWorkflowWidget v-if="packageActionsDto?.canView"
      client-id="maui"
      :package-id="packageId"
  ></AisWorkflowWidget>

  <AisWorkflowHistory v-else
      :package-id="packageId"
      :history-json="historyJson"
  ></AisWorkflowHistory>
</template>

With AisWorkflow

<template>
  <AisWorkflow
      client-id="maui"
      :package-id="packageId"
      :can-view="packageActionsDto.canView"
      :history-json="historyJson"
  ></AisWorkflow>
</template>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
canView	Boolean		false	Controls which workflow component is displayed. When true, AisWorkflowWidget is displayed. When false (or not provided), AisWorkflowHistory is displayed.	false
clientId	String		''	The uiowa OIDC client id	false
historyJson	String		''	The json string representing the routing history for the package in Universal Workflow	false
historyMode	Boolean		false	Set to true if you want to display the package history instead of approval options. This is an optional parameter and defaults to false.	false
noRedirect	Boolean		false	Set to true if you don't want to redirect the user back to their workflow inbox after an event is triggered.	false
noWrap	Boolean		false	When true, the history will not be wrapped in a AisCard component.	false
packageId	String		''	The package id in Universal Workflow	false
variant	String		'default'	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false
env	String		''	The application/workflow environment Valid values: test, prod Deprecated - No longer needed in newer OIDC workflow widget versions	true
formId	String		''	The form id in Universal Workflow Deprecated - No longer needed in newer OIDC workflow widget versions	true
scope	String		''	The oAuth2 scope Deprecated - No longer needed in newer OIDC workflow widget versions	true
signatureId	String		''	The signature id in Universal Workflow Deprecated - No longer needed in newer OIDC workflow widget versions	true

Slots

Name	Scoped	Description

Events

Event	Arguments	Description
approve	event object - Native event object	Emitted when a package is approved
r2i	event object - Native event object	Emitted when a package is returned to initiator
void	event object - Native event object	Emitted when a package is voided