User Tools

Site Tools


newdevs:angularclient:basicadmin

Using the Basic Admin Page Component

  • creates a basic grid with editing dialog
  • most arguments are pass-throughs for the grid and fieldmapper editor
  • the recordLabel input is what gets used on the "New $THING" toolbar button / action menu
  • note magic URLs! use them to replace the auto-generated interfaces with your own
    • admin/local/ + schema + class = admin/local/config/copy_alert_type
    • edit admin/local splash or admin/server splash links as appropriate
  • you do not need <eg-fm-editor>! You can use your own, but you will have to create a bunch of scaffolding for opening and closing the editing dialog.
  • you will have to create an SQL upgrade file + 950.seed data for your grid settings

Using the Fieldmapper Editor

Input types render automatically based on field data type. Look through fm-editor.component.html, <ng-container [ngSwitch]="inputType(field)"> for all the variations. A custom template will override these defaults AND the readonly setting.

To render a combobox, set that field's options to customValues: myComboBoxEntriesArray:

   [fieldOptions]="{
    myFieldName1: {customValues: myComboBoxEntriesArray}
   }"

To render a custom template (with optional context arguments), set:

   [fieldOptions]="{
     myFieldName1: {customTemplate: {template: myTemplateRefHashFor1}},
     myFieldName2: {customTemplate: {template: myTemplateRefHashFor2, context: {letVarName: myFieldName2ContextData}}}
   }"

for example:

   [fieldOptions]="{
      event: {customTemplate: {template: eventTemplate}},
      next_status: {customTemplate: {template: next_statusTemplate, context: {statuses: copyStatuses}}}
   }"
 
   <ng-template #next_statusTemplate let-field="field" let-record="record"     let-statuses="statuses">
     <fieldset *ngIf="!field.isReadOnly()" [attr.aria-label]="field.label" 
        id="next_status-{{record.id()}}" class="scrollable-menu border rounded my-1 p-2 d-sm-flex flex-column flex-wrap">
     ... some inputs here
     </fieldset>
 
    <output *ngIf="field.isReadOnly()" id="next_status-{{record.id()}}">
      {{ record[field.name]() }}
    </output>
   </ng-template>

Always use: let-field="field" let-record="record"

Optionally use let-myVarInThisTemplate="MyVarSetInFieldOptionsContext"

Pcrud

Use pcrud.retrieve() to fetch a row by its primary key:

   pcrud.retrieve('aou', 1).then( org => console.log(org.shortname()) );

Use pcrud.search() to do a full query with a WHERE object (the second argument):

   pcrud.search('aou', {id : [1,2,3]}).then( orgs => console.log(orgs.length) );

Use pcrud.search() with a third argument to add limit, order_by, and fleshing:

   pcrud.search('aou', {id : {'!=' : null}}, {limit : 10}).then( orgs => {
     for (const org of orgs) {
       console.debug('Org unit:', org.id(), org.shortname());
     }
   } );
  • Note that booleans are given as 't' or 'f'
  • order_by is an object where the keys are the classnames and the values are strings with the field name, then a space, then the direction (ASC or DESC)

Record notes example:

  1. const where = {
  2. record: this.recId,
  3. deleted: 'f'
  4. };
  5.  
  6. const orderBy: any = {};
  7.  
  8. if (sort.length) { // Sort provided by grid.
  9. orderBy.bren = sort[0].name + ' ' + sort[0].dir;
  10. } else {
  11. orderBy.bren = 'edit_date';
  12. }
  13.  
  14. const searchOps = {
  15. offset: pager.offset,
  16. limit: pager.limit,
  17. order_by: orderBy,
  18. flesh: 2,
  19. flesh_fields: {bren: ['creator', 'editor']}
  20. };
  21.  
  22. return this.pcrud.search('bren', where, searchOps)
  23. .pipe(tap({
  24. complete: this.emitNoteCount
  25. }));

Fleshing

flesh_fields is an object where the keys are the classnames and the values are arrays of field names. flesh is the recursion depth.

Note that only pcrud is capable of fleshing; cstore is not. This means org unit settings cannot be fleshed! If you need to turn a user or OU ID into a name from settings data, you will need to add some logic to fetch those separately.

IDL vs. Hash

Pcrud returns columns as functions:

   org.shortname();

To set a new value, pass the value as an argument:

   note.value(new_note_text);

The IDL service has a toHash() method that can make this easier to work with if all you're doing is reading data:

  idl.toHash(org_unit);
  console.debug("Org unit is:", org_unit.shortname);

Note there is an option to flatten the data.

As of 3.15, there is also a way to go from a hash back to a proper IDL object:

  idl.fromHash(some_object, 'aou');

The classname is the second argument. There is an optional third argument to convert booleans from 't/f' to true/false

newdevs/angularclient/basicadmin.txt · Last modified: 2025/04/02 15:59 by sleary

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.