Description of reusable components

Last update: May 24, 2024

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

Modeltasklist.js
Viewtasklist.js
Templatetasklist.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

Modeltask.js
Viewtask.js
Templatetask.html
Requires componentsNA
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.

FilterList

Modeltasklist.js
Viewfilterlist.js
Templatefilterlist.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)

  • fetched - tasklist model

  • remove - tasklist model

  • updateQueue - tasklist model

  • refreshedQueue - tasklist model

  • filterSelected - tasklist model

Filter

Viewfilter.js
Templatefilter.html
Requires componentsNA
JS dependencies

  • Field: queue: { name, qid, isDefault, type}

  • Field: query: string

  • Field: parentView: filterlist view

  • Field: parentModel: tasklist model

  • Field: utility

Events listenedNA

TeamQueues

Modeltasklist.js
Viewteamqueues.js
Templateteamqueues.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)

  • fetched - tasklist model

  • remove - tasklist model

  • updateQueue - tasklist model

  • teamQueuesFetched - tasklist model

TeamFilter

ModelNA
Viewteamfilter.js
Templateteamfilter.html
Requires componentsNA
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 listenedNA
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

Modeltasklist.js
Viewtaskdetails.js
Templatetaskdetails.html
Requires componentsMost 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

CategoryList

Modelcategorylist.js
Viewcategorylist.js
Templatestartprocess.html (in the route folder)
Requires componentsCategory
JS dependencies

  • favoritecategoryfactory model

  • allcategoryfactory model

Events listened (Event name - Trigger)

  • allStartpointsFetched - categorylist model

  • add - categorylist model

NOTE
This component uses model classes of some other components like StartPointList, StartPoint, and Task. Besides this dependency, CategoryList can be used independently.

Category

Modelcategory.js
Viewcategory.js
Templatecategory.html
Requires componentsNA
JS dependencies

  • categorylist model

  • startpointlist model

Events listened (Event name - Trigger)

  • changed - category model

  • childrenFetched - category model

  • category:selected - categorylist model

StartPointList

Modelcategorylist.js
Viewstartpointlist.js
Templatestartprocess.html (in the route folder)
Requires componentsNA
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

Modelstartpoint.js
Viewstartpoint.js
Templatestartpoint.html
Requires componentsNA
JS dependenciestask model
Events listened (Event name - Trigger)change - startpoint model

StartProcess

Modelcategorylist.js
Viewstartprocess.js
Templatestartprocess.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

Modelprocessnamelist.js
Viewprocessnamelist.js
Templatetracking.html (in the route folder)
Requires componentsNA
JS dependenciesprocessname 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

Modelprocessname.js
Viewprocessname (in processnamelist.js)
Templateprocessname.html
Requires componentsNA
JS dependenciesprocessinstancelist model
Events listened (Event name - Trigger)change - processname model

ProcessInstanceList

Modelprocessnamelist.js
Viewprocessinstancelist.js
Templatetracking.html (in the route folder)
Requires componentsNA
JS dependenciesprocessname 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

Modelprocessinstance.js
Viewprocessname inside processnamelist.js
Templateprocessinstance.html
Requires componentsNA
JS dependenciestasklist model
Events listened (Event name - Trigger)change - processinstance model

ProcessInstanceHistory

Modelprocessnamelist.js
Viewprocessinstancehistory.js
Templateprocessinstancehistory.html
Requires componentsNA
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

Modeloutofoffice.js
Viewoutofoffice.js
Templateoutofoffice.html
Requires componentsUserSearch
JS dependenciesusersearch 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

Modelsharequeue.js
Viewsharequeue.js
Templatesharequeue.html
Requires componentsUserSearch
JS dependenciesusersearch 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

Modeluisettings.js
Viewuisettings.js
Templateuisettings.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)

  • preferencesFetched - uisettings model

  • settingUpdated - uisettings model

NOTE
UISettings can be used independently.

AppNavigation

Modelappnavigation.js
Viewappnavigation.js
Templateappnavigation.html
Requires componentsNA
JS dependenciesNA
Events listenedNA
NOTE
AppNavigation can be used independently.

UserInfo

Modeluserinfo.js
Viewuserinfo.js
Templateuserinfo.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)
  • userImageUrlFetched - userinfo model
  • sessionRenewed - userinfo model
  • sessionExpired - userinfo model
NOTE
UserInfo can be used independently.

WSError

Modelwserror.js
Viewwserror.js
Templatewserror.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)newWsError - wserror model

UserSearch

Modelusersearch.js
Viewusersearch.js
Templateusersearch.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)
  • principalSearched - principalsearch model
  • outOfOfficeInfoFetched - usersearch model

SearchTemplate

Modelsearchtemplate.js
Viewsearchtemplate (in searchtemplatelist.js)
Templatesearchtemplate.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)templateFetched- searchtemplate model

SearchTemplateList

Modelsearchtemplatelist.js
Viewsearchtemplatelist.js
Templatetracking.html (in the route folder)
Requires componentsNA
JS dependenciessearchtemplate model
Events listened (Event name - Trigger)change - searchtemplatelist model

SearchTemplateDetails

Modelsearchtemplatelist.js
Viewsearchtemplatedetails.js
Templatesearchtemplatedetails.html
Requires componentsNA
JS dependenciesNA
Events listened (Event name - Trigger)searchTemplate:selected - searchtemplate model

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now