Table of Contents

Using the Basic Admin Page Component

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());
     }
   } );

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