Description of reusable components

Last update: May 24, 2024

Applies to:
Experience Manager 6.5

Topics:
Adaptive Forms

CREATED FOR:

Admin
User
Developer

AEM Forms workspace is composed of reusable components which are organized in a specific folder structure in CRX™. Each component has model, view, and template file at location specified in the folder structure, JavaScript™ dependencies on other component files, events listened by the component and JavaScript objects which trigger these events in AEM Forms workspace. The complete list of reusable components with constituent filenames and dependencies is given here.

TaskList

Model	tasklist.js
View	tasklist.js
Template	tasklist.html
Requires components	UserSearch Task Teamtask
JS dependencies	task model teamtask model
Events listened (Event name - Trigger)	filterSelected - tasklist model remove - tasklist model updateQueue - tasklist model

NOTE

This component can be used independently of AEM Forms workspace, provided you trigger filterSelected event for this component from your custom application.

Task

Model	task.js
View	task.js
Template	task.html
Requires components	NA
JS dependencies	tasklist model taskactions utility
Events listened (Event name - Trigger)	submitComplete - task model Reject - task model

NOTE

Workspace calls fetchTasks function of TaskList model to create Task models for this component.

Model

tasklist.js

View

filterlist.js

Template

filterlist.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

fetched - tasklist model
remove - tasklist model
updateQueue - tasklist model
refreshedQueue - tasklist model
filterSelected - tasklist model

Filter

View

filter.js

Template

filter.html

Requires components

NA

JS dependencies

Field: queue: { name, qid, isDefault, type}
Field: query: string
Field: parentView: filterlist view
Field: parentModel: tasklist model
Field: utility

Events listened

NA

TeamQueues

Model

tasklist.js

View

teamqueues.js

Template

teamqueues.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

fetched - tasklist model
remove - tasklist model
updateQueue - tasklist model
teamQueuesFetched - tasklist model

TeamFilter

Model

NA

View

teamfilter.js

Template

teamfilter.html

Requires components

NA

JS dependencies

Extends : filter view
Field : queue :{ name, qid, isDefault, type }
Field : query : string
Field : parentView : filterlist view
Field : parentModel : tasklist model
Field : utility

Events listened

NA

NOTE

TeamFilter gets the event indicating which task has been selected from TaskList component. Although these components share the model class, there is no other dependency.

TaskDetails

Model

tasklist.js

View

taskdetails.js

Template

taskdetails.html

Requires components

Most of the Utility classes

JS dependencies

processinstancehistory.html
formrendering utility
notes utility
attachments utility
taskactions utility
history utility

Events listened (Event name - Trigger)

forwarded - task model
shared - task model
consulted - task model
rejected - task model
abandoned - task model
unlocked - task model
locked - task model
claimed - task model
change:taskselected - tasklist model
change:formUrl - task model
attachmentURLFetched - task model

newAttachment - task model
taskHistoryFetched - task model
prepareForSubmitComplete - task model
submitComplete - task model

Model

categorylist.js

View

categorylist.js

Template

startprocess.html (in the route folder)

Requires components

StartPointList

Model

categorylist.js

View

startpointlist.js

Template

startprocess.html (in the route folder)

Requires components

NA

JS dependencies

category model
favoritecategoryfactory model
allcategoryfactory model
startpoint view
startpointlist model
startpoint model
task model
task model
tasklist model
teamtask model

Events listened (Event name - Trigger)

category:selected - categorylist model
allStartpointsFetched - categorylist model

NOTE

StartPointList and CategoryList components share the model class, hence the former depends on the latter. CategoryList accesses the information about which category’s start points are shown. To use StartPointList independently, simulate the event trigger from CategoryList.

StartPoint

Model

startpoint.js

View

startpoint.js

Template

startpoint.html

Requires components

NA

JS dependencies

task model

Events listened (Event name - Trigger)

change - startpoint model

StartProcess

Model

categorylist.js

View

startprocess.js

Template

startprocess.html

Requires components

Most of the Utility classes
UserSearch

JS dependencies

category model
favoritecategoryfactory model
allcategoryfactory model
formrendering utility
notes utility
attachments utility
taskactions utility

Events listened (Event name - Trigger)

category:selected - categorylist model
change:invokedTask - startpointlist model
change:formUrl - task model
startpoint:selected - startpointlist model
forwarded - task model
abandoned - task model
unlocked - task model
locked - task model
attachmentURLFetched - task model
newAttachment - task model
prepareForSubmitComplete - task model
submitComplete - task model
allStartpointsFetched - categorylist model

NOTE

StartProcess and StartPointList components share the model class. This component becomes relevant you select a startpoint from StartPointList.

ProcessNameList

Model

processnamelist.js

View

processnamelist.js

Template

tracking.html (in the route folder)

Requires components

NA

JS dependencies

processname model

Events listened (Event name - Trigger)

add - processnamelist model
fetched:processnames - processnamelist model
change - processnamelist model

NOTE

ProcessNameList does not depend on other components. However, internally it depends on ProcessInstanceList model class that in turn depends on other components. Hence, ProcessNameList uses many model classes like ProcessInstanceList, ProcessInstance, TaskList, Teamtask, and Task. Besides these dependencies, ProcessNameList can be used independently.

ProcessName

Model

processname.js

View

processname (in processnamelist.js)

Template

processname.html

Requires components

NA

JS dependencies

processinstancelist model

Events listened (Event name - Trigger)

change - processname model

ProcessInstanceList

Model

processnamelist.js

View

processinstancelist.js

Template

tracking.html (in the route folder)

Requires components

NA

JS dependencies

processname model

Events listened (Event name - Trigger)

processname:selected - processnamelist model
processname:instancesfetched - processnamelist model

NOTE

ProcessInstanceList expects an event from ProcessNameList indicating the process name for fetching and displaying instances. To use ProcessInstanceList independently, simulate the event trigger separately.

ProcessInstance

Model

processinstance.js

View

processname inside processnamelist.js

Template

processinstance.html

Requires components

NA

JS dependencies

tasklist model

Events listened (Event name - Trigger)

change - processinstance model

ProcessInstanceHistory

Model

processnamelist.js

View

processinstancehistory.js

Template

processinstancehistory.html

Requires components

NA

JS dependencies

processname model
history utility

Events listened (Event name - Trigger)

processname:selected - processnamelist model
processinstance:selected - processinstancelist model
tasksFetched - processinstance model

NOTE

ProcessInstanceHistory expects an event from ProcessInstanceList indicating which process instance’s history is to be shown. Besides this dependency the component can be used independently.

OutofOffice

Model

outofoffice.js

View

outofoffice.js

Template

outofoffice.html

Requires components

UserSearch

JS dependencies

usersearch view

Events listened (Event name - Trigger)

outOfOfficeSettingsFetched - outofoffice model
outOfOfficeSettingsSaved - outofoffice model
processesFetched - outofoffice model
principalSelected - principalsearch view

NOTE

OutofOffice can be used independently.

ShareQueue

Model

sharequeue.js

View

sharequeue.js

Template

sharequeue.html

Requires components

UserSearch

JS dependencies

usersearch view

Events listened (Event name - Trigger)

queueAccessGranted - sharequeue model
queueAccessRequested - sharequeue model
grantedUsersFetched - sharequeue model
accessibleUsersFetched - sharequeue model
queueAccessRevoked - sharequeue model
queueAccessRemoved - sharequeue model
principalSelected - principalsearch view

NOTE

ShareQueue can be used independently.

UISettings

Model

uisettings.js

View

uisettings.js

Template

uisettings.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

preferencesFetched - uisettings model
settingUpdated - uisettings model

NOTE

UISettings can be used independently.

AppNavigation

Model

appnavigation.js

View

appnavigation.js

Template

appnavigation.html

Requires components

NA

JS dependencies

NA

Events listened

NA

NOTE

AppNavigation can be used independently.

UserInfo

Model

userinfo.js

View

userinfo.js

Template

userinfo.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

userImageUrlFetched - userinfo model
sessionRenewed - userinfo model
sessionExpired - userinfo model

NOTE

UserInfo can be used independently.

WSError

Model

wserror.js

View

wserror.js

Template

wserror.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

newWsError - wserror model

UserSearch

Model

usersearch.js

View

usersearch.js

Template

usersearch.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

principalSearched - principalsearch model
outOfOfficeInfoFetched - usersearch model

SearchTemplate

Model

searchtemplate.js

View

searchtemplate (in searchtemplatelist.js)

Template

searchtemplate.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

templateFetched- searchtemplate model

SearchTemplateList

Model

searchtemplatelist.js

View

searchtemplatelist.js

Template

tracking.html (in the route folder)

Requires components

NA

JS dependencies

searchtemplate model

Events listened (Event name - Trigger)

change - searchtemplatelist model

SearchTemplateDetails

Model

searchtemplatelist.js

View

searchtemplatedetails.js

Template

searchtemplatedetails.html

Requires components

NA

JS dependencies

NA

Events listened (Event name - Trigger)

searchTemplate:selected - searchtemplate model

recommendation-more-help

Description of reusable components

TaskList

Task

FilterList

Filter

TeamQueues

TeamFilter

TaskDetails

CategoryList

Category

StartPointList

StartPoint

StartProcess

ProcessNameList

ProcessName

ProcessInstanceList

ProcessInstance

ProcessInstanceHistory

OutofOffice

ShareQueue

UISettings

AppNavigation

UserInfo

WSError

UserSearch

SearchTemplate

SearchTemplateList

SearchTemplateDetails