User Tools

Site Tools


newdevs:code:angular-field-order

New Developers Working Group

Control Field Order and Styling in Form Modals

Controlling Field Order

If you do not specify the field order when opening an Angular form in a modal, the fields will be displayed in alphabetical order. To improve readability and usability, it is best to specify the desired field order either through the relevant routing module (for dynamically-created interfaces) or through the HTML template (for interfaces that have additional customizations).

Via the Routing Module

When you are working with a basic, dynamically-created interface you can control the field order by modifying the relevant routing.module.ts file. Note that you can also specify certain fields as visible but read-only. For example:

     path: 'asset/copy_location',
     component: BasicAdminPageComponent,
     data: [{
         schema: 'asset',
         table: 'copy_location',
         readonlyFields: 'deleted',
         fieldOrder: 'owning_lib,name,opac_visible,circulate,holdable,hold_verify,
             checkin_alert,deleted,label_prefix,label_suffix,url,id'}]

A good example of this is in /eg2/src/app/staff/admin/local/routing.module.ts

Via the HTML Template

The grid column and modal field order can be controlled by adding the fieldOrder parameter to the relevant HTML file:

  fieldOrder="field1,field2,field3"

An example of this in action can be seen in admin-carousel.component.html:

  <eg-fm-record-editor #editDialog idlClass="{{idlClass}}" 
    [preloadLinkedValues]="true"
    fieldOrder="owner,name,type,age_filter,max_items,owning_lib_filter,
      copy_location_filter,active,id,bucket,last_refresh_time,creator,
      create_time,editor,edit_time"
    hiddenFieldsList="creator,editor,create_time,edit_time"
    [preSave]="mungeCarousel" (recordSaved)="postSave($event)"
    readonlyFields="last_refresh_time"
    [fieldOptions]="{bucket:{customTemplate:{template:bucketTemplate}},
      copy_location_filter:{customTemplate:{template:locationTemplate}},
      owning_lib_filter:{customTemplate:{template:orgTemplate}}}">
  </eg-fm-record-editor>

Note that you can also make use of the hiddenFieldsList parameter for fields that do not need to show on the form, and of the readonlyFields parameter to make specified fields uneditable.

Adding Field Row Styling to Modals

Beginning in Evergreen 3.13 (LP1915464), it is now possible to add CSS styling to specific field rows in modals that are generated by the Fieldmapper Editor Component (fm-editor.component.css).

First, you will need to identify the fieldmapper's class ID (found in fm_IDL.xml - for example, 'chmm' is the class ID for the Local Admin > Hold Policies interface that is generated from the config.hold_matrix_matchpoint database table) and the names of the fields you wish to style (for example, 'item_owning_ou').

Then, modify eg2/src/app/share/fm-editor/fm-editor.component.css to add styling to the specific rows. The Local Admin > Hold Policies modal is already styled to break the long list of fields into logical groupings (starting with the fields for Owning Library, User Home Library, Holdable?, and Requestor Permission Group) with space and a dotted line between each group:

.row {
   --section-border: 2px dotted var(--bs-gray-900);
   --section-padding: 2.5rem;
 }
 
/* Modal for Local Admin > Hold Policies */
 .chmm .row.item_owning_ou,
 .chmm .row.user_home_ou,
 .chmm .row.holdable,
 .chmm .row.requestor_grp {
   border-top: var(--section-border);
   padding-top: var(--section-padding);
 }
newdevs/code/angular-field-order.txt · Last modified: 2024/06/05 13:29 by tmccanna

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.