3 About Convergence UI Widgets

This chapter identifies many UI elements in Oracle Communications Convergence.

Location of Javascript Widgets

The widgets are located in the Convergence_Domain/docroot/iwc_static/js/iwc/widget directory.

Widgets for each service are located in separate directories:

• Mail widgets: ../widget/mail

• Calendar widgets: ../widget/calendar

• Address Book widgets: ../widget/addressBook

• Instant Messaging widgets: ../widget/im

• Indexing and Search Service widgets: ../widget/iss

Audio/visual widgets are located in the following directories:

• Common audio/visual widgets: ../widget

• IM audio/visual widgets: ../widget/im

• WebRTC audio/visual widgets: ../widget/webRTC

Option widgets are located within each service directory:

• Mail Options: ../widget/mail/option

• Calendar Options: ../widget/calendar/option

• Address Book Options: ../widget/addressBook/option

• Instant Messaging Options: ../widget/im/option

• Indexing and Search Service Options: ../widget/iss/option

Common widgets are located within the ../widget directory:

• Common widgets: ../widget

• Common form widgets: ../widget/form

• Common option widgets: ../widget/option

You create your customized widgets in the customization home directory. For example:

c11n_Home/Domain/js/widget

where Domain is the name of the domain where the customizations are applied. For example:

c11n_Home/allDomain/js/widget

See "Technical Overview" for more information.

Common Widgets

The common Convergence widgets are shown in the following figures:

• Figure 3-1, "Common Widgets in Convergence UI"

• Figure 3-2, "Convergence UI Recipient Widget"

Figure 3-1 shows the location of the following widgets:

1. The Banner widget (Banner.js)

2. The QuickActions widget (QuickActions.js)

3. The ServiceMenu widget (ServiceMenu.js)

4. The SaveNotification widget (SaveNotification.js)

5. The SaveNotificationMessage widget (SaveNotificationMessage.js)

Figure 3-1 Common Widgets in Convergence UI

Figure 3-2 shows the location of the following widgets:

1. The Recipient widget (Recipient.js)

Figure 3-2 Convergence UI Recipient Widget

Mail Widgets

The Convergence mail widgets are shown in the following figures:

• Figure 3-3, "Common Convergence Mail Widgets"

• Figure 3-4, "Convergence Mail Create Message Widgets"

• Figure 3-5, "Convergence Mail Open Message Widget"

• Figure 3-6, "Convergence Mail Advanced Search and Select Folder Input Widgets"

• Figure 3-7, "Convergence Mail Print Message Widget"

• Figure 3-8, "Convergence Mail Folder Properties Dialog Widget"

• Figure 3-9, "Convergence Mail Folder Dialog Widget"

Figure 3-3 shows the location of the following widgets:

1. The Navigator widget (mail.Navigator.js)

2. The FolderTree widget (mail.FolderTree.js)

3. The ViewerContainer widget (mail.ViewerContainer.js)

4. The OpenFolder widget (mail.OpenFolder.js)

5. The Grid widget (mail.Grid.js)

6. The MessageViewer widget (mail.MessageViewer.js)

Figure 3-3 Common Convergence Mail Widgets

Figure 3-4 shows the location of the following widgets:

1. The CreateMessage widget (mail.CreateMessage.js)

2. The EmailComboTextarea widget (addressBook.EmailComboTextarea.js)

Figure 3-4 Convergence Mail Create Message Widgets

Figure 3-5 shows the location of the following widgets:

1. The OpenMessage widget (mail.OpenMessage.js)

Figure 3-5 Convergence Mail Open Message Widget

Figure 3-6 shows the location of the following widgets:

1. The SelectFolderInput widget (mail.SelectFolderInput.js)

2. The AdvancedSearch widget (mail.AdvancedSearch.js)

Figure 3-6 Convergence Mail Advanced Search and Select Folder Input Widgets

Figure 3-7 shows the location of the following widgets:

1. The PrintMessage widget (mail.PrintMessage.js)

Figure 3-7 Convergence Mail Print Message Widget

Figure 3-8 shows the location of the following widgets:

1. The FolderPropertiesDialog widget (mail.FolderPropertiesDialog.js)

Figure 3-8 Convergence Mail Folder Properties Dialog Widget

Figure 3-9 shows the location of the following widgets:

1. The FolderDialog widget (mail.FolderDialog.js)

Figure 3-9 Convergence Mail Folder Dialog Widget

Address Book Widgets

The Convergence address book widgets are shown in the following figures:

• Figure 3-10, "Common Convergence Address Book Widgets"

• Figure 3-11, "Convergence Address Book Corporate Book Browser Widget"

• Figure 3-12, "Convergence Address Book Create Contact Widget"

• Figure 3-13, "Convergence Address Book Create Group Widget"

• Figure 3-14, "Convergence Address Book Export Contacts Dialog Widget"

• Figure 3-15, "Convergence Address Book Import Contacts Dialog Widget"

• Figure 3-16, "Convergence Address Book Create Contact Dialog Widget"

• Figure 3-17, "Convergence Address Book Book Store Item Selector Widget"

• Figure 3-18, "Convergence Address Book Resource Store Item Selector Widget"

Figure 3-10 shows the location of the following widgets:

1. The Navigator widget (addressBook.Navigator.js)

2. The ViewerContainer widget (addressBook.ViewerContainer.js)

3. The PersonalBookBrowser widget (addressBook.PersonalBookBrowser.js)

4. The BookBrowserToolbar widget (addressBook._BookBrowserToolbar.js)

Figure 3-10 Common Convergence Address Book Widgets

Figure 3-11 shows the location of the following widgets:

1. The CorporateBookBrowser widget (addressBook.CorporateBookBrowser.js)

Figure 3-11 Convergence Address Book Corporate Book Browser Widget

Figure 3-12 shows the location of the following widgets:

1. The CreateContact widget (addressBook.CreateContact.js)

Figure 3-12 Convergence Address Book Create Contact Widget

Figure 3-13 shows the location of the following widgets:

1. The CreateGroup widget (addressBook.CreateGroup.js)

Figure 3-13 Convergence Address Book Create Group Widget

Figure 3-14 shows the location of the following widgets:

1. The ExportContactsDialog widget (addressBook.ExportContactsDialog.js)

Figure 3-14 Convergence Address Book Export Contacts Dialog Widget

Figure 3-15 shows the location of the following widgets:

1. The ImportContactsDialog widget (addressBook.ImportContactsDialog.js)

Figure 3-15 Convergence Address Book Import Contacts Dialog Widget

Figure 3-16 shows the location of the following widgets:

1. The CreateContactDialog widget (addressBook.CreateContactDialog.js)

Figure 3-16 Convergence Address Book Create Contact Dialog Widget

Figure 3-17 shows the location of the following widgets:

1. The BookStoreItemSelector widget (addressBook.BookStoreItemSelector.js)

Figure 3-17 Convergence Address Book Book Store Item Selector Widget

Figure 3-18 shows the location of the following widgets:

1. The ResourceStoreItemSelector widget (addressBook.ResourceStoreItemSelector.js)

Figure 3-18 Convergence Address Book Resource Store Item Selector Widget

Calendar Widgets

The Convergence Calendar widgets are shown in the following figures:

• Figure 3-19, "Common Convergence Calendar Widgets"

• Figure 3-20, "Convergence Calendar Day View Widget"

• Figure 3-21, "Convergence Calendar Week View Widget"

• Figure 3-22, "Convergence Calendar Next 7 View Widget"

• Figure 3-23, "Convergence Calendar Month View Widget"

• Figure 3-24, "Convergence Calendar List View and View Event Item Widgets"

• Figure 3-25, "Convergence Calendar List View and View Invites Item Widgets"

• Figure 3-26, "Convergence Calendar List View and View Task Item Widgets"

• Figure 3-27, "Convergence Calendar Event Widget"

• Figure 3-28, "Convergence Calendar Monthly Events Widget"

• Figure 3-29, "Convergence Calendar Create Events and Invitees Widgets"

• Figure 3-30, "Convergence Calendar Recurrence Dialog Widget"

• Figure 3-31, "Convergence Calendar Create Task Dialog Widget"

• Figure 3-32, "Convergence Calendar Task Detail Widget"

• Figure 3-33, "Convergence Calendar Event Balloon Widget"

• Figure 3-34, "Convergence Calendar View Event Widget"

• Figure 3-35, "Convergence Calendar Task Detail Widget"

• Figure 3-36, "Convergence Calendar Availability Widget"

• Figure 3-37, "Convergence Calendar Notification (Reminder) Dialog Widget"

• Figure 3-38, "Convergence Calendar Print Dialog Widget"

• Figure 3-39, "Convergence Calendar Print Widget"

• Figure 3-40, "Convergence Calendar Time Zone Dialog Widget"

• Figure 3-41, "Convergence Calendar Export Dialog Widget"

• Figure 3-42, "Convergence Calendar Import Dialog Widget"

• Figure 3-43, "Convergence Calendar Subscribe Widget"

Figure 3-19 shows the location of the following widgets:

1. The Navigator widget (calendar.Navigator.js)

2. The Calendar widget (digit._Calendar.js)

3. The ViewerContainer widget (calendar.ViewerContainer.js)

4. The ViewDispatcher widget (calendar.ViewDispatcher.js)

5. The Event widget (calendar.Event.js)

Figure 3-19 Common Convergence Calendar Widgets

Figure 3-20 shows the location of the following widgets:

1. The DayView widget (calendar.DayView.js)

Figure 3-20 Convergence Calendar Day View Widget

Figure 3-21 shows the location of the following widgets:

1. The WeekView widget (calendar.WeekView.js)

Figure 3-21 Convergence Calendar Week View Widget

Figure 3-22 shows the location of the following widgets:

1. The Next7View widget (calendar.Next7View.js)

Figure 3-22 Convergence Calendar Next 7 View Widget

Figure 3-23 shows the location of the following widgets:

1. The MonthView widget (calendar.MonthView.js)

Figure 3-23 Convergence Calendar Month View Widget

Figure 3-24 shows the location of the following widgets:

1. The ListView widget (calendar.MonthView.js)

2. The ListItemEvent widget (calendar.ListItemEvent.js)

Figure 3-24 Convergence Calendar List View and View Event Item Widgets

Figure 3-25 shows the location of the following widgets:

1. The ListView widget (calendar.MonthView.js)

2. The ListItemInvite widget (calendar.ListItemInvite.js)

Figure 3-25 Convergence Calendar List View and View Invites Item Widgets

Figure 3-26 shows the location of the following widgets:

1. The ListView widget (calendar.MonthView.js)

2. The ListItemTask widget (calendar.ListItemTask.js)

Figure 3-26 Convergence Calendar List View and View Task Item Widgets

Figure 3-27 shows the location of the following widgets:

1. The Event widget (calendar.Event.js)

Figure 3-27 Convergence Calendar Event Widget

Figure 3-28 shows the location of the following widgets:

1. The MonthlyEvents widget (calendar.MonthlyEvent.js)

Figure 3-28 Convergence Calendar Monthly Events Widget

Figure 3-29 shows the location of the following widgets:

1. The CreateEvent widget (calendar.CreateEvent.js)

2. The Invitees widget (calendar.Invitees.js)

Figure 3-29 Convergence Calendar Create Events and Invitees Widgets

Figure 3-30 shows the location of the following widgets:

1. The RecurrenceDialog widget (calendar.RecurrenceDialog.js)

Figure 3-30 Convergence Calendar Recurrence Dialog Widget

Figure 3-31 shows the location of the following widgets:

1. The CreateTaskDialog widget (calendar.CreateTaskDialog.js)

Figure 3-31 Convergence Calendar Create Task Dialog Widget

Figure 3-32 shows the location of the following widgets:

1. The TaskDetail widget (calendar.TaskDetail.js)

Figure 3-32 Convergence Calendar Task Detail Widget

Figure 3-33 shows the location of the following widgets:

1. The EventBalloon widget (calendar.EventBalloon.js)

Figure 3-33 Convergence Calendar Event Balloon Widget

Figure 3-34 shows the location of the following widgets:

1. The ViewEvent widget (calendar.ViewEvent.js)

Figure 3-34 Convergence Calendar View Event Widget

Figure 3-35 shows the location of the following widgets:

1. The QuickEventBalloon widget (calendar.QuickEventBalloon, in calendar.TaskDetail.js)

Figure 3-35 Convergence Calendar Task Detail Widget

Figure 3-36 shows the location of the following widgets:

1. The Availability widget (calendar.Availability.js)

Figure 3-36 Convergence Calendar Availability Widget

Figure 3-37 shows the location of the following widgets:

1. The NotificationDialog widget (calendar.NotificationDialog.js)

Figure 3-37 Convergence Calendar Notification (Reminder) Dialog Widget

Figure 3-38 shows the location of the following widgets:

1. The PrintDialog widget (calendar.PrintDialog.js)

Figure 3-38 Convergence Calendar Print Dialog Widget

Figure 3-39 shows the location of the following widgets:

1. The Print widget (calendar.Print.js)

Figure 3-39 Convergence Calendar Print Widget

Figure 3-40 shows the location of the following widgets:

1. The TimezoneDialog widget (calendar.TimezoneDialog.js)

Figure 3-40 Convergence Calendar Time Zone Dialog Widget

Figure 3-41 shows the location of the following widgets:

1. The ExportDialog widget (calendar.ExportDialog.js)

Figure 3-41 Convergence Calendar Export Dialog Widget

Figure 3-42 shows the location of the following widgets:

1. The ImportDialog widget (calendar.ImportDialog.js)

Figure 3-42 Convergence Calendar Import Dialog Widget

Figure 3-43 shows the location of the following widgets:

1. The Subscribe widget (calendar.Subscribe.js)

Figure 3-43 Convergence Calendar Subscribe Widget

Instant Messaging Widgets

The Convergence Instant Messaging widgets are shown in the following figures:

• Figure 3-44, "Convergence Instant Messaging Contacts Widget"

• Figure 3-45, "Convergence Instant Messaging Session Widget"

• Figure 3-46, "Convergence Instant Messaging Add Buddy Dialog Widget"

• Figure 3-47, "Convergence Instant Messaging Contact Properties Dialog Widget"

• Figure 3-48, "Convergence Instant Messaging Group Properties Dialog Widget"

• Figure 3-49, "Convergence Instant Messaging Photo (Avatar) Dialog Widget"

• Figure 3-50, "Convergence Instant Messaging Custom Presence (Status) Dialog Widget"

Figure 3-44 shows the location of the following widgets:

1. The Contacts widget (im.Contacts.js)

Figure 3-44 Convergence Instant Messaging Contacts Widget

Figure 3-45 shows the location of the following widgets:

1. The Session widget (im.Session.js)

Figure 3-45 Convergence Instant Messaging Session Widget

Figure 3-46 shows the location of the following widgets:

1. The AddBuddyDialog widget (im.AddBuddyDialog.js)

Figure 3-46 Convergence Instant Messaging Add Buddy Dialog Widget

Figure 3-47 shows the location of the following widgets:

1. The ContactPropertiesDialog widget (im.ContactPropertiesDialog.js)

Figure 3-47 Convergence Instant Messaging Contact Properties Dialog Widget

Figure 3-48 shows the location of the following widgets:

1. The GroupPropertiesDialog widget (im.GroupPropertiesDialog.js)

Figure 3-48 Convergence Instant Messaging Group Properties Dialog Widget

Figure 3-49 shows the location of the following widgets:

1. The PhotoDialog widget (widget.PhotoDialog.js)

Figure 3-49 Convergence Instant Messaging Photo (Avatar) Dialog Widget

Figure 3-50 shows the location of the following widgets:

1. The CustomPresenceDialog widget (im.CustomPresenceDialog.js)

Figure 3-50 Convergence Instant Messaging Custom Presence (Status) Dialog Widget

Audio/Visual Widgets

The Convergence Audio/Visual widgets are shown in the following figures:

• Figure 3-51, "Common Convergence Audio/Visual/Text Chat Widgets"

• Figure 3-52, "Convergence Dialer Pad Widget"

• Figure 3-53, "Convergence WebRTC Video Chat Widget in Filmstrip Mode"

• Figure 3-54, "Convergence Addon Audio/Visual Chat Widget and Reference Implementation"

Figure 3-51 shows the location of the following widgets:

1. The AVTChat widget (AVTChat.js)

2. One of the following:

   • The im.Session widget (im.Session.js) is used for peer-to-peer chat sessions.

   • The im.GroupChatSession widget (im.GroupChatSession.js) is used for chat sessions involving more than two participants.

Figure 3-51 Common Convergence Audio/Visual/Text Chat Widgets

Figure 3-52 shows the location of the following widgets:

1. The DialerPad widget (DialerPad.js)

Figure 3-52 Convergence Dialer Pad Widget

Figure 3-53 shows the location of the following widgets:

1. The webRTC.VideoChat widget (webRTC.VideoChat.js)

   The webRTC.VideoChat widget supports different video modes, including full-screen mode, filmstrip mode (shown), picture-in-picture mode, and tile mode.

Figure 3-53 Convergence WebRTC Video Chat Widget in Filmstrip Mode

Figure 3-54 shows the location of the following widgets:

1. The addon.av.AVChat widget (addon.av.AVChat.js)

   Extend addon.av.AVChat to implement your own custom video service.

Figure 3-54 Convergence Addon Audio/Visual Chat Widget and Reference Implementation

Options Widgets

The Convergence Option widgets are shown in the following figures:

• Figure 3-55, "Common Convergence Option Widgets"

• Figure 3-56, "Convergence Global Option General Widget"

• Figure 3-57, "Convergence Global Option Date and Time Widget"

• Figure 3-58, "Convergence Global Option Password Widget"

• Figure 3-59, "Convergence Global Option Audio Alerts Widget"

• Figure 3-60, "Convergence Mail Option General Widget"

• Figure 3-61, "Convergence Mail Option Layout Widget"

• Figure 3-62, "Convergence Mail Option Forwarding Widget"

• Figure 3-63, "Convergence Mail Option Filter List Widget"

• Figure 3-64, "Convergence Mail Option (New) Filter Widget"

• Figure 3-65, "Convergence Mail Option Vacation Message Widget"

• Figure 3-66, "Convergence Mail Option (Local Account) Identity Widget"

• Figure 3-67, "Convergence Calendar Option General Widget"

• Figure 3-68, "Convergence Calendar Option Event Widget"

• Figure 3-69, "Convergence Calendar Option Notification Widget"

• Figure 3-70, "Convergence Instant Messaging Option General Widget"

Figure 3-55 shows the location of the following widgets:

1. The Navigator widget (option.Navigator.js)

2. The ViewContainer widget (option.ViewContainer.js)

Figure 3-55 Common Convergence Option Widgets

Figure 3-56 shows the location of the following widgets:

1. The General widget (option.General.js)

Figure 3-56 Convergence Global Option General Widget

Figure 3-57 shows the location of the following widgets:

1. The DateAndTime widget (option.DateAndTime.js)

Figure 3-57 Convergence Global Option Date and Time Widget

Figure 3-58 shows the location of the following widgets:

1. The Password widget (option.Password.js)

Figure 3-58 Convergence Global Option Password Widget

Figure 3-59 shows the location of the following widgets:

1. The AudioAlerts.Options widget (option.AudioAlerts.Options.js)

Figure 3-59 Convergence Global Option Audio Alerts Widget

Figure 3-60 shows the location of the following widgets:

1. The mail.option.General widget (mail.option.General.js)

Figure 3-60 Convergence Mail Option General Widget

Figure 3-61 shows the location of the following widgets:

1. The mail.option.Layout widget (mail.option.Layout.js)

Figure 3-61 Convergence Mail Option Layout Widget

Figure 3-62 shows the location of the following widgets:

1. The mail.option.Forwarding widget (mail.option.Forwarding.js)

Figure 3-62 Convergence Mail Option Forwarding Widget

Figure 3-63 shows the location of the following widgets:

1. The mail.option.FilterList widget (mail.option.FilterList.js)

Figure 3-63 Convergence Mail Option Filter List Widget

Figure 3-64 shows the location of the following widgets:

1. The mail.option.Filter widget (mail.option.Filter.js)

Figure 3-64 Convergence Mail Option (New) Filter Widget

Figure 3-65 shows the location of the following widgets:

1. The mail.option.VacationMessage widget (mail.option.VacationMessage.js)

Figure 3-65 Convergence Mail Option Vacation Message Widget

Figure 3-66 shows the location of the following widgets:

1. The mail.option.Identity widget (mail.option.Identity.js)

Figure 3-66 Convergence Mail Option (Local Account) Identity Widget

Figure 3-67 shows the location of the following widgets:

1. The calendar.option.General widget (calendar.option.General.js)

Figure 3-67 Convergence Calendar Option General Widget

Figure 3-68 shows the location of the following widgets:

1. The calendar.option.Event widget (calendar.option.Event.js)

Figure 3-68 Convergence Calendar Option Event Widget

Figure 3-69 shows the location of the following widgets:

1. The calendar.option.Notification widget (calendar.option.Notification.js)

Figure 3-69 Convergence Calendar Option Notification Widget

Figure 3-70 shows the location of the following widgets:

1. The im.option.General widget (im.option.General.js)

Figure 3-70 Convergence Instant Messaging Option General Widget