This is an old revision of the document!
Table of Contents
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:
const where = { record: this.recId, deleted: 'f' }; const orderBy: any = {}; if (sort.length) { // Sort provided by grid. orderBy.bren = sort[0].name + ' ' + sort[0].dir; } else { orderBy.bren = 'edit_date'; } const searchOps = { offset: pager.offset, limit: pager.limit, order_by: orderBy, flesh: 2, flesh_fields: {bren: ['creator', 'editor']} }; return this.pcrud.search('bren', where, searchOps) .pipe(tap({ complete: this.emitNoteCount }));
Fleshing
flesh_fields is an object where the keys are the classnames and the values are arrays of field names.