Smart Components for AgileApps

From AgileApps Support Wiki
Revision as of 13:13, 3 November 2019 by imported>Aeric

Introduction

The runtime UI components in AgileApps platform are exported as HTML element tags (custom elements) to customize the platform user interface. All the custom elements can make REST API calls internally and hence are knows as Smart Components.

You do not need to invoke API calls to render data in the Smart Components. The Smart Components use internal API calls to perform CRUD operations on records. Inputs to the APIs are usually passed as DOM attributes to the custom elements. Most of the Smart components are able to accept input parameters and some of them are also able to dispatch certain element specific events.

If there are any future updates to the internal APIs used in the smart components, the internal implementation of Smart components would be updated. The customized UI need not be updated upon every version/patch release of the platform, in usual circumstances.

The following Smart Components are currently available:

Activity History <ace-activity-history>

The Activity history allows you to display the activities performed on a record. Each entry in the activity history provides details about who did what, and when. It shows:

  • Emails sent by platform user or by the user.
  • Messages received through the Email Channel (generally as a reply to a message that was sent).
  • Any private notes added to a record.
  • The new old values of any Audited Fields. For Cases, all fields are audited by default. For example, any change to the Status or Priority of a case record is automatically recorded in the case history. For other objects, you must explicitly enable the field auditing.
Following is an example for Activity History:
Smart comp activit hist.png

HTML Tag with Attributes

The following section provides details on the HTML tags with its associated attributes for Activity History: Smart comp activit hist html.png

The following table provides details for the HTML attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the object ID.
record-id String Required Provide the record ID of the object for which you want to see the activity.
id String Required Provide the unique identifier for the DOM elements.
is-dropdown-visible Boolean Optional If value is true, then provide the drop-down to filter the activity history. Following are the options:
  • All activities
  • My activities
  • Updates
  • Messages & notes
  • Files attached

By default value is false. In the above snapshot, filter option is visible.

css-classlist String Optional Override the styling for activity history. You can pass the list of class by space separator to override the style.

Back to the Top

Application Tabs List <ace-app-tabs-list>

This lists all the application tabs in an application. It includes objects, JSP pages, Web tabs, and so on. An example for the Application Tabs list is as follows:

Smart comp app tab.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for Application Tabs List: Smart comp app tab html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
css-classlist String Optional Override the styling of component. You can pass the list of class by space separator to override the style.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
selectionChange JS Object. The format is as follows:
 {
canAdd: true,
id: "cases,
singularTitle: "Case",
title: "Cases",
type: "object"
uri?: "https://google.co.in",
webtabname?: "google.co.in"
}

Optional Provide the application tab data on active of any tab. Following code listens to the change event on the application tab element.
// HTML element
<ace-app-tabs-list id="appTabs"></ace-app-tabs-list>
 
 
// JS code
const tabsList = document.querySelector('#appTabs');
tabsList.addEventListener('selectionChange', function (eventData) {
 const recordData = eventData['detail'];
})

Back to the Top

Login Form <ace-login-form>

You can use the Login Form component for any application login page. You can write your own logic using the success or failure handlers of this component. The following image is an example for the Login form:

Smart comp login form.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for Login Form: Smart comp login form html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
css-classlist String Optional Override the styling of Login Form. You can pass the list of class by space separator to override the style.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
loginSuccess JS Object. Optional This gives the response for successful login. Following code listens to the change event on the login form for successful login.
// HTML element
<ace-login-form id="LoginForm"
                    css-classlist="mat-typography bg-transparent">
                  </ace-login-form>
 
 
// JS code
document.querySelector('#LoginForm').addEventListener('loginSuccess', function (eventData) {
                      login_error_elem.innerHTML = `
                            <h4 class="alert-heading">Login Success!</h4>
                            <p> Successfully logged in </p>`;
                      login_error_elem.style.display = "block";
                      login_error_elem.className = "alert alert-success ";
                    })

loginError JS Object. Optional This gives the response for login failure. Following code listens to the change event on the login form for login failure.
// HTML element
<ace-login-form id="LoginForm"
                    css-classlist="mat-typography bg-transparent">
                  </ace-login-form>


// JS code
document.querySelector('#LoginForm').addEventListener('loginError', function (eventData) {
                      login_error_elem.innerHTML = `
                            <h4 class="alert-heading">Login Error!</h4>
                      login_error_elem.style.display = "block";
                      login_error_elem.className = "alert alert-danger";
                    })

Back to the Top

Notes Editor <ace-notes-editor>

Notes editor may be Private notes or Email messages. You can create it when viewing a Case record or some other record and they are stored in the record history. The following image is an example for the Email message:
Smart comp notes edit email.png

The following image is an example for Private note:
Smart comp notes edit private note.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for Notes Editor: Smart comp notes edit html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID.
record-id String Required Provide the record id of the object for which you want to add the notes.
css-classlist String Optional Override the styling of Notes Editor. You can pass the list of class by space separator to override the style.
action-panel "top" | "bottom" | "hide" align="left"|Optional

default = top. This is the default location for the action panel of the Notes-editor. Usage:

  • "top" = displays on the top of the notes-editor.
  • "bottom" = displays on the bottom of the notes-editor.
  • "hide" = Hides the action-buttons from the notes-editor component.
action-button "start" | "center" | "end" | "between" | "around" | "evenly" align="left"|Optional

default = start. This is the default location for the action button of the Notes Editor. Usage:

  • "start" = displays the SAVE and CANCEL button on the left side.
  • "center" = displays the SAVE and CANCEL button in the center.
  • "end" = displays the SAVE and CANCEL button on the right side.
  • "between" = displays the SAVE and CANCEL button between the left side and the right side.
  • "around" = displays the SAVE and CANCEL button with a space.
  • "evenly" = displays the SAVE and CANCEL button with equal space.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
saveNote JS Object. The format is as follows:
Key Value
Data event.data
Message Notes saved successfully
Optional This gives the successful/failure message with data object on saving the note. Following code listens to the change event on the Notes Editor.
// HTML element
<ace-notes-editor id="noteseditor"
object-id="cases" record-id="23334543">
</ace-notes-editor>
 
 
// JS code
const notesEditor = document.querySelector('#noteseditor');
notesEditor.addEventListener('saveNote', function (eventData) {
    const saveNoteData = eventData['detail'];
})

The following table provides the HTML details for the Component Instance Methods:

Method Name Description Sample Example
inputContent(noteObj) Use this to save the record. Here noteObj is a parameter of type object. It should have two properties subject and content. Pass the input content to the Notes Editor as follows:
// HTML elements
<ace-notes-editor object-id="cases" record-id="12345" id="notesEditor"></ace-notes-editor>
 
 
// JS script
<script>
const notesEditor = document.querySelector('#notesEditor');
function updateNotes() {
    const noteObj = {
        subject: 'My First Note',
        content: 'Hello world !!!'
    };
    notesEditor.inputContent(noteObj);
}
</script>

saveNote() Use this to save the Notes Editor changes. Pass the following for saving the record notes:
<button onclick="saveNote()">SAVE</button>
<ace-notes-editor id="notes-editor" object-id="cases" record-id="1026401569" css-classlist="bg-white border border-secondary px-4 py-2">
</ace-notes-editor>
  
<script>
function saveNote(){
    const notesEditor = document.querySelector('#notes-editor');
    dynamicRef.saveNotes();
 }
</script>

Back to the Top

Object View List <ace-object-views-list>

It lists all the views inside an object with record count. The following image is an example for the Object View List:
Smart comp object view.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for Object View List:
Smart comp object view html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID. It fetches the list of views present for that object.
css-classlist String Optional Override the styling of Object View List. You can pass the list of class by space separator to override the style.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
selectionChange JS Object. The format is as follows:
Key Value
Count 12
Default 0
Id cases
IsActive false
IsSelectedAsTab false
Name All Active Cases
SortBy last_activity
SortOrder desc
ViewCreatedBy 0
ViewObjectId cases
Optional This gives the metadata of the selected view. Following code listens to the change event on the Object View List component.
// HTML element
<ace-object-views-list object-id="cases" id="listOfViews"></ace-object-views-list>
 
 
//JS script
const objectViewList = document.querySelector('#listOfViews');
objectViewList.addEventListener('selectionChange',
    function (eventData) {
        const recordData = eventData['detail'];
})

Back to the Top

Owner Assignment <ace-owner-assign>

Use this component to assign a record to a user or a team or have it assigned to yourself. It auto suggests the names while typing in the Assignee field. The Assign to me link assigns the record to the logged-in(current) user. The following image is an example for the Owner Assignment component:
Smart comp owner assign.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for Owner Assignment:
Smart comp owner assign html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID.
record-id String Required Provide the application record ID.
show-users String Required Possible values are true or false. It decides whether to show the users list or not.
show-teams String Required Possible values are true or false. It decides whether to show the list of teams or not.
self-claim String Required Possible values are true or false. It decides whether to show the Assign to me link or not.
css-classlist String Optional Override the styling of Owner Assignment component. You can pass the list of class by space separator to override the style.
action-panel "top" | "bottom" | "hide" align="left"|Optional

default = top. This is the default location for the action panel of the Owner Assignment component. Usage:

  • "top" = displays on the top of the Owner Assignment component.
  • "bottom" = displays on the bottom of the Owner Assignment component.
  • "hide" = Hides the action-buttons from the Owner Assignment component.
action-button "start" | "center" | "end" | "between" | "around" | "evenly" align="left"|Optional

default = start. This is the default location for the action button of the Owner Assignment component. Usage:

  • "start" = displays the SAVE and CANCEL button on the left side.
  • "center" = displays the SAVE and CANCEL button in the center.
  • "end" = displays the SAVE and CANCEL button on the right side.
  • "between" = displays the SAVE and CANCEL button between the left side and the right side.
  • "around" = displays the SAVE and CANCEL button with a space.
  • "evenly" = displays the SAVE and CANCEL button with equal space.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
assignedRecord JS Object. The format is as follows:
Key Value
Data 2566523
Message Record assigned successfully.
Optional This gives the success or failure message for record assignment. Following code listens to the change event for this component.
// HTML elements
<ace-owner-assign id="ownerAssign" object-id="cases" record-id="1554361346" show-users="true" show-teams="true" self-claim="true"></ace-owner-assign>
 
 
//JS script
const ownerComponent = document.querySelector('#ownerAssign');
notesEditor.addEventListener('assignedRecord', function (eventData) {
    const saveData = eventData['detail'];
})


The following table provides the HTML details for the Component Instance Methods:

Method Name Description Sample Example
assignedRecord() Use this method to assign the record to a user or a team only. Call the assignedRecord method as follows:
// HTML elements
<button onclick="assignRecord()">assign</button>
 
//JS script
<script>
    function assignRecord(){
        const ownerAssign = document.querySelector('#ownerAssign');
        ownerAssign.assignRecord();
     }
</script>

claimRecord() Use this method to claim the record to the currently active user. Call the claimRecord method as follows:
// HTML elements
<button onclick="claimRecord()">assign</button>
 
//JS script
<script>
    const ownerAssignEle = document.querySelector('#ownerAssign');
    function claimRecord() {
        ownerAssignEle.claimRecord();
    }
</script>

Back to the Top

Record Attachment <ace-record-attachment>

This component allows you to attach attachments to a record and to display the files attached .It also displays the list of files attached through Notes Editor.

The following image is an example for the Attachments list:

Smart comp rec attach list.png

The following image is an example for the Attach File dialog:

Smart comp rec attach dialog.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for the Record Attachment component:
Smart comp rec attach html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID.
view-id String Required Provide the view ID of the object.
css-classlist String Optional Override the styling of Record Attachment component. You can pass the list of class by space separator to override the style.
attachment-header String Optional This attaches the header name. Default='show'.

Possible values are:

  • "show" = displays on top of the record-attachment.
  • "hide" = Hides the record-attachment header from component.
thumbnail-image String Optional Default value = 'show'. Possible values are:
  • "show" = displays the thumbnail on the left of the attachment.
  • "hide" = Hides the thumbnail.
delete-button String Optional Use this to show the Delete button. The default value ='show'. Possible values are:
  • "show" = displays the attachment-delete button to the right of the attachment.
  • "hide" = Hides the attachment-delete button.

Notepad.png

Note: Output Events are not applicable for Record Attachment component.

The following table provides the HTML details for the Component Instance Methods:

Method Name Description Sample Example
openAttachDialog() Use this method to add a new attachment and to open the Attach file dialog for that attachment. The code sample for the openAttachDialog() method is as follows:
// HTML elements
<button onclick="openDialog()">Open Attachment Dialog</button>
<ace-record-attachment id="attachment" object-id="cases"
    record-id="12455683" attachment-header='show'
    thumbnail-image='hide' delete-button='hide'>
</ace-record-attachment>
 
 
// JS script
<script>
const recordAttachment = document.querySelector('#attachment');
function openDialog() {
    recordAttachment.openAttachDialog();
}
</script>

deleteAttachment(index) Use this method to delete the existing attachment. Here use the parameter index to define which list element to delete. Call the deleteAttachment(index) method as follows:
// HTML elements
<button onclick="deleteAttachment()">Delete Attachment</button>
<ace-record-attachment id="attachment" css-classlist="bg-white" object-id="xxxxx" record-id="xxxxx">
</ace-record-attachment>
 
 
// JS script
<script>
const recordAttachment = document.querySelector('#attachment');
function deleteAttachment() {
     recordAttachment.deleteAttachment(0);
}
</script>

Back to the Top

Record Form <ace-record-form>

Record Form is one of the most important components available in AgileApps. You can create, update and clone a record by using <ace-record-form>.

The following image is an example for the Record Form component:

Smart comp record form.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for the Record form component:
Smart comp record form html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID.
record-id String Required Provide the record ID of the object for which you want to view the record details. For a new record, set record-id='1'.
css-classlist String Optional Override the styling of Record form component. You can pass the list of class by space separator to override the style.
display-mode "accessibility" | "View" Optional default = "". These are the different display modes for the field.

Usage:

  • "accessibility" = displays in Accessibility mode.
  • "view" = displays in View mode.
  • "" = displays the default display mode.
formDisplayMode String Optional Default value = "".

Usage:

  • "printmode" = displays the sections in an expansion panel.
layout-id String Optional Layout ID of the form.
record-form-extras String Optional Record form extras should be a string and it accepts the key value pairs separated by a colon (:) and properties are separated by a comma.

Usage:

  • record-form-extras="skipLocationChange:true". Here the skipLocationChange is true is used to prevent the navigation of the lookup field and it gives the information of the selected record in the lookup field.

The following table provides the HTML details for the Output Events:

Event Name Return Type Required/Optional Description Sample Example
loadRecordForm JS Object. The format is as follows:
Key Value
Account {"name":"test123","id":"1111079810"}
Attachment
Cases_testdatetime_1575840529 07/10/2019 05:18 PM
Cases_testpicklist_1575840529
Contact {"name":"","id":""}
Description t20
Owner_id {"name":"schindler schindler","id":"b44e3cca159f4954b176cc988c4dc8c7"}
Priority 3
Status 1
Subject t20i
Test_formula2_1575840529
Test_formula_1575840529
Type 1
Optional This event gives the record data on loading of the form for an object. Following code listens to the change event for this component.
// HTML element
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>
 
 
// JS code
const taskComponent = const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('loadRecordForm', function (eventData) {
 const onLoadData = eventData['detail'];
 })

saveRecordForm JS Object. The format is as follows:
Key Value
Account {"name":"test123","id":"1111079810"}
Attachment
Cases_testdatetime_1575840529 07/10/2019 05:18 PM
Cases_testpicklist_1575840529
Contact {"name":"","id":""}
Description t20
Owner_id {"name":"schindler schindler","id":"b44e3cca159f4954b176cc988c4dc8c7"}
Priority 3
Status 1
Subject t20i
Test_formula2_1575840529
Test_formula_1575840529
Type 1
Optional When you save a record, it gives the record data in the form of an object. Following code listens to the change event for this component.
// HTML element
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>
 
 
// JS code
const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('saveRecordForm', function (eventData) {
 const onSaveData = eventData['detail'];
 })

resetRecordForm JS Object. The format is as follows:
Key Value
Account {"name":"test123","id":"1111079810"}
Attachment
Cases_testdatetime_1575840529 07/10/2019 05:18 PM
Cases_testpicklist_1575840529
Contact {"name":"","id":""}
Description t20
Owner_id {"name":"schindler schindler","id":"b44e3cca159f4954b176cc988c4dc8c7"}
Priority 3
Status 1
Subject t20i
Test_formula2_1575840529
Test_formula_1575840529
Type 1
Optional When you reset or cancel a record, it gives the record data in the form of an object. Following code listens to the change event for this component.
// HTML element
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>
 
 
// JS code
const rfEle = document.querySelector('#recordFormId');
rfEle.addEventListener('resetRecordForm', function (eventData) {
 const onResetData = eventData['detail'];
 })

navigateToLookupRecord JS Object. The format is as follows:
Key Value
ObjectId cases
RecordId 1920107811
Row

{"last_activity_v":"12/09/2019 11:43","owner_id":{"name":"Mounika c","id":"a6d4c192fb8d49c599e583d5db0ecaff"},"priority_value":"3","subject":"t","source":"Agent","from_name":"c","priority":"P3","object_id":"cases","last_activity":"2 hours ago","record_locator":"001442 - t","contact":{"name":"c","id":"1493009286"},"case_number":"001442","submitter_photo_id":"","id":"1920107811","notifications":[],"status":"New"}

Optional When you click the lookup field navigation link, it gives the selected record information. The record-form-extras input should have skipLocationChange:true. Following code listens to the change event for this component.
// HTML element
<ace-record-form object-id="cases" record-id="43334342" id="recordFormId">
</ace-record-form>
 
 
// JS code
const rfEle = document.querySelector('#recordFormId');
rfEleme.addEventListener('navigateToLookupRecord', function (eventData) {
       const lookupRecordInfo = eventData['detail'];
});

Back to the Top

Record Process <ace-record-process>

Use this component to show the list of processes associated with the respective records. Individual process can have respective action items like Start, Stop, and Remove if the process is not complete.

The following image is an example for the Record Process component:

Smart comp record process.png

HTML Tag with Attributes

The following section provides details about the HTML tags with its associated attributes for the Record Process component:
Smart comp record process html.png

The following table provides the HTML details for the Input attributes:

Attributes Type Required/Optional Description
object-id String Required Provide the application object ID. It fetches the list of views present for that object.
record-id String Required Provide the record ID of the object for which you want to view the process list.
css-classlist String Optional Override the styling of Record Process component. You can pass the list of class by space separator to override the style.

Back to the Top