Skip to end of metadata
Go to start of metadata

Ids

  • Uif-Application - showing the app/view after load, sticky content calculations, updateViewHandler
  • Uif-ViewContentWrapper - not used currently, may be expected in structure though
  • Uif-PageContentWrapper - sticky content calculations, page update, sidebar navigation
  • Uif-Navigation - navigation div, used in sticky adjustments
  • dialogs_div - dialogs/lightbox functionality
  • kualiForm - validation, file upload, submit, focus, suggest and lightbox submits
  • formComplete - stores extra form variables for submission
  • kualiLightboxForm - for lightbox submission
  • Uif-ApplicationHeader-Wrapper - hook for css for sticky functionality and tests
  • Uif-ApplicationFooter-Wrapper - sticky functionality
  • Uif-TopGroupWrapper - top group updates, css hook for sticky
  • Uif-BreadcrumbWrapper - breadcrumb setup and updates, hook for sticky
  • formKey - form key for url manipulations
  • flowKey - flow key for history tracking
  • pageId - current pageId
  • singlePageView - settings
  • disableBrowserCache - settings
  • header id and .header2 - old portal stuff, used to determine scroll amount
  • routeLogIFrame - used to target the routeLog
  • renderedInLightBox - flag for determining if content is in lightbox

Data attributes

  • data-role - multiple selections and usages (placeholder, view, breadcrumbs, input fields, disclosures, action handler, totals, details, etc.); used as a common non-css hook
  • data-type - specific control targetting, messages, validation, tabs
  • data-onclick - used by global onclick handler
  • data-open - disclosure and details state handling
  • data-return - lookup functionality
  • data-sticky - identifies sticky content
  • data-sticky_footer - identifies sticky footer content
  • data-messages_for - validation messages owner
  • data-header_for - header for group by id, used to determine section title
  • data-speed - animation speed for disclosure
  • data-ajax - marker for retrieve via ajax disclosure link
  • data-widgetid - component state id (disclosure)
  • data-ConfigParameters - stores configuration parameters
  • data-submit_data - necessary data required for ajax submissions beyond the default
  • data-role='Control' - role is described above, but this is particularly important for control selection
  • data-role='InputField' - role is described above, but this is particularly important for input field selection
  • data-validation_messages - required data for validation message setup for groups and fields
  • tabwrapperfor - points to the group which is wrapped by this tab wrapper, used for handling validation style on tabs
  • data-tabfor - tab for the group by id

ID suffixes used for selection

  • _dialogPlaceholder - dialog placeholder for opened dialogs
  • _control - control of a field
  • _markers - for showing additional icon
  • _errors - message div selection
  • _update - update div marker in response
  • _label_span - the label's span, used during component update
  • _tabs - selector for group for tab widget processing

Uif Css Classes

  • uif-clientMessageItems - validation style and selection
  • uif-errorMessageItem-field
  • uif-warningMessageItem-field
  • uif-infoMessageItem-field
  • uif-errorMessageItem
  • uif-warningMessageItem
  • uif-infoMessageItem
  • uif-clientWarningDiv - validation style
  • uif-collapsedErrors - validation
  • uif-collapsedInfo - validation
  • uif-errorMessageItem-field - validation
  • uif-validationImage - validation images on field tooltips
  • uif-messageCount - container for message count
  • dirty - dirty functionality (used for state and optionally style)
  • disabled - disabled functionality (used for state and style)
  • error - marks field as in error, used by plugin
  • uif-readOnlyContent - identifies read only content
  • active - marks active links, used by plugins
  • displayWith- - prefix content to be with id after dash
  • uif-collectionItem
  • uif-dialogButtons - used in button style setup for dialogs
  • has-helper - used to identify things that have helper text(?)
  • uif-helperText - identifies the helper text
  • uif-tooltip - identifies items which have tooltip content to show
  • uif-viewHeader - used by view header update
  • uif-navigationMenu - used to select current page
  • uif-tabMenu - used to select current page
  • uif-pageValidationHeader - used to focus page header when messages are present
  • required - marks required fields/identifies required fields, used by plugin, sets up aria-required
  • ignoreValid - marker for controls whose validation will be skipped, used by plugin
  • jquerybubblepopup - plugin class, used to select it
  • jquerybubblepopup-innerHtml - plugin class, used to select content
  • uif-bubblepopup-content - used to select bubblepopup/tooltip content
  • uif-hasError - state and style for uif errors
  • uif-action - action selector (used by openPopupContentsWithErrors to reopen popup forms with errors)
  • fancybox-wrap - used to select fancybox content (fancybox plugin)
  • watermark - marks watermark inputs
  • uif-control - marks controls for selection
  • fancybox-frame - fancybox frame selection for jump to / focus on
  • uif-placeholder - used by placeholder spans so content can be added in the appropriate location
  • dataTable - used to select tables which are using the dataTables plugin, for totals
  • uif-hasAddLine - to identify if the table has an add line in the table
  • paginate_active - used to get the current active data table page
  • dataTables_info - used to get information about the table for paging/features
  • uif-correctedError - errors that have been corrected client side
  • #uLookupResults.uif-infoMessageItem - used to avoid displaying some messages for lookup scenario
  • dependsOn- - id after dash, used for depends on checks, validation
  • uif-requiredMessage - required message for field (the * indicator in most cases)
  • uif-breadcrumbSiblingLink - the triangle link in breadcrumbs for sibling menu, used to setup handler
  • dropdown-toggle - bootstrap widget class, used by sidebar/other
  • submenu - for sidebarNavMenu setup of sub menus
  • sidebar-collapse - collapse action icon for handler setup
  • icon-angle-right - icon for collapsing
  • icon-angle-left - icon for collapsing
  • sidebar-collapsed - collapsed css state
  • detailsRow - details manipulation/selection
  • uif-rowDetails - details manipulation/selection
  • ui-tabs-bottom .ui-tabs-nav, .ui-tabs-bottom .ui-tabs-nav - tab selection for adding/removing classes

Expected Structure requirements

This one is tough to really find, probably many more than this:

  • Radio and Checkbox groups use fieldset for their content
  • Radio and Checkbox options are contained in a span with the input and label together
  • div[data-role='InputField'] contains their control as children
  • Fields and groups are divs
  • Fields and groups contain their validation options
  • View contains default options in its data for validation and other functionality
  • label has for attribute
  • label has a td or th element as a parent when used in a grid when using field label separator
  • .uif-errorMessageItem should have an underlying div
  • User inputs have names
  • Groups, fields, elements have unique ids
  • th in thead and td in tbody

Ids used...

  • in almost all field handlers
  • for validation message owner id
  • to identify headers that belong to section by id
  • for running scripts by id
  • for disclosing content
  • for refreshing content
  • for showing details
  • for retrieving validation data by id
  • for widget setup

Id statistics (in our js)

  • 445 usages of the word id (non-captilized, as a word by itself)
  • 550 of "Id" (as part of another word with capital I, ie camel-case cases)
  • 74 usages of: "#" + id
  • 41 usages of: attr("id")

  • 105 usages of fieldId
  • 7 usages of groupId
  • 5 usages of componentId
  • 14 usages of compId
  • 16 elementId
  • 30 usages of sectionId

 

  • No labels