Page interactions

A page interaction controls a defined place inside Novo where you can manipulate how the user interface is displayed. Items can be hidden, disabled, update the style, update the label, and so forth.

Page interaction API object

Each page interaction script gets access to an API object. This API object contains information about the current user, settings, entitlements, and so forth. It also has access to the AppBridge, a ToastService and a ModalService which can be used to open up other records, perform HTTP calls or notify the user of some action.

A quick way to see what is available via the API is via:

console.log('API', API);

The API has the following properties:

API = {
    globals: {
        settings: Array,
        entitlements: Object,
        user: {
            corporationId: number,
            corporationName,
            email: string,
            name: string,
            firstName: string,
            lastName: string,
            locale: string,
            masterUserId: number,
            privateLabelId: number,
            swimLaneId: number,
            userId: number,
            userTypeId: number,
            username: string
        }
    },
    appBridge: AppBrige,
    toastService: NovoToastService,
    modalService: NovoModalService,
    currentEntity: string,
    currentEntityTrack: string,
    currentEntityId: string,
    pageContext: string
}

To use the API, do the following:

if (API.currentEntity === 'Candidate') { }
if (API.globals.user.userId === 123) { }
API.appBridge.httpGET(URL).then(success, failure);

The pageContext on the API can give you more information about where the interaction is executing. For example:

  1. Add record has a page context of FastAdd.
  2. Edit record has a page context of Record.
  3. The submission workflow modals have page contexts of MoveToConfirmed, MoveToRejected, MoveToInterviewing, MoveToPlacement, MoveToInternalSubmission and MoveToClientSubmission.

Current page interactions

  1. Record page
    1. Modify tabs
      1. Change Label
      2. Mark Disabled
      3. Mark Hidden
      4. Update Style
    2. Modify actions
      1. Change label
      2. Mark disabled
      3. Mark hidden
      4. Update style
    3. Modify overview fields
      1. Change label
      2. Change display data
      3. Mark disabled
      4. Mark hidden
      5. Custom class name
    4. Modify workflow icons
      1. Change label
      2. Change count
      3. Mark disabled
      4. Mark hidden
      5. Update style
      6. Custom class name
      7. Convert ID field to data
      8. Convert ID field to data with link
    5. Modify activity sections
      1. Mark hidden
      2. Update style
      3. Custom class name
    6. Modify workflow section
      1. Mark hidden
      2. Add label
      3. Update style
      4. Custom class name
    7. Add edit presave
      1. Mark form as invalid
      2. Show warning prompt
      3. Display toast
    8. Add edit postsave
      1. Open add task

Record page

Modify tabs
Change label 
item.label = 'New Label;
Mark disabled 
item.disabled = true;
Mark hidden 
item.hidden = true;
Update style 
item.style = { color: 'red' };
Modify actions
Change Label 
item.label = 'New Label;
Mark disabled 
item.disabled = true;
Mark hidden 
item.hidden = true;
Update style 
item.style = { color: 'red' };
Modify overview fields
Change label 
field.label = 'New Label;
Change display data 
data.fieldName = 'New Display Data';
Mark disabled 
field.disabled = true;
field.readOnly = true;
Mark hidden 
field.hidden = true;
Custom class name 
API.injectCustomStyles('custom-style', '.custom>label { color: red !important; } .custom>value { color: purple; });
field.className = 'custom';
Convert ID field to data 
if(field.name === 'customText1' && data.customText1) {
    return new Promise(function (resolve) {
        API.appBridge.httpGET('entity/ClientContact/' + data.customText1+ '?fields=name')
        .then(function(result) {
            data.customText1 = result.data.data.name;
            resolve(field);
        });
    });
}
Convert ID field To data /w Link 
if(field.name === 'customText1' && data.customText1) {
    return new Promise(function (resolve) {
        API.appBridge.httpGET('entity/ClientContact/' + data.customText1+ '?fields=name')
        .then(function(result) {
            var id = data.customText1;
            data.customText1 = result.data.data.name;
            field.onClick = function() {
                 API.appBridge.open({type: 'record', entityType: 'ClientContact', entityId: id, tab: 'activity'});
            };
            resolve(field);
        });
    });
}
Modify workflow icons
Change label 
item.label = 'New Label';
Change count 
item.count = 123;
Mark disabled 
item.disabled = true;
Mark hidden 
item.hidden = true;
Update style 
item.style = { color: 'red' };
Custom class name 
API.injectCustomStyles('custom-style', '.custom>label { color: red !important; } .custom>value { color: purple; });
field.className = 'custom';
Modify activity sections
Mark hidden 
item.hidden = true;
Update style 
item.style = { color: 'red' };
Custom class name 
API.injectCustomStyles('custom-style', '.custom>label { color: red !important; } .custom>value { color: purple; });
field.className = 'custom';
Modify workflow section
Mark hidden 
item.hidden = true;
Add label 
item.label = '<p>Please make sure to edit correctly</p>';

Note: The label is only displayed when the workflow section is marked hidden.
Update style 
item.style = { color: 'red' };
Custom class name 
API.injectCustomStyles('custom-style', '.custom p { color: red !important; });
item.className = 'custom';
Add edit presave
Mark form as invalid 
if (form && form.controls && form.controls.referredBy && !form.controls.referredBy.value) {
    form.isFormValid = false;
    form.errorMessage = 'Candidate Referred By is Invalid!';
}
Show warning prompt 
API.promptUser({
    headerText: 'Are you sure you want to update this Form?',
    subheaderText: 'Please check all the data again.'
});
Display toast 
API.displayToast({
    message: 'Check the form again'
});
Add edit postsave
Open add task 
API.appBridge.open({
    type: 'add',
    entityType: 'Task'
});