How a custom component from the contextual side panel can set a value in a field in the current form its been viewed?

Go to solution
americo
Tera Contributor

‎05-14-2020 07:56 PM

Hi,

I have been playing around with custom components for agent workspace and I wonder if anyone has been successful on having a component update an existing component. Let's say, I have a form and in the context side panel I show a custom component where user can search and select a custom Category in the ticket. I'm trying to avoid template option since this custom component is a search where user can pick up a category and then it should populate category/subcategory in the ticket automatically. However, I'm not able to figure out how to do this. This is not like you can use g_form to refer to the form and populate the values from the custom component , or is it possible? As I know, components are independent and use shadow dom. I just want to have a way to set a field value based on what the user has selected in my custom component. This is just a use case, I see potential on be able to set values between components without saving the form.

  • 1,628 Views
1 ACCEPTED SOLUTION

Go to solution
Michael Grondin
Kilo Expert

‎05-15-2020 05:54 AM

You can actually use gForm in the contextual side panel! It can be accessed in the host object that is passed in the lifecycle actions, but the preffered way is to add a property to your component named gForm that gets populated automatically from the Action Model Fields. See here: https://community.servicenow.com/community?id=community_question&sys_id=37bb1477dba0d41014d6fb243996...

Using gForm you can then set the fields using gForm.setValue(fieldname, value).

actionHandlers: {
    [COMPONENT_BOOTSTRAPPED]: ({updateState, action: {payload: {host}}}) => {
        host.gForm.setValue('subcategory', 'email', 'Email');
        updateState({gForm: gForm}); // Keep a reference on gForm
    }

View solution in original post

2 REPLIES 2

Go to solution
Michael Grondin
Kilo Expert

‎05-15-2020 05:54 AM

You can actually use gForm in the contextual side panel! It can be accessed in the host object that is passed in the lifecycle actions, but the preffered way is to add a property to your component named gForm that gets populated automatically from the Action Model Fields. See here: https://community.servicenow.com/community?id=community_question&sys_id=37bb1477dba0d41014d6fb243996...

Using gForm you can then set the fields using gForm.setValue(fieldname, value).

actionHandlers: {
    [COMPONENT_BOOTSTRAPPED]: ({updateState, action: {payload: {host}}}) => {
        host.gForm.setValue('subcategory', 'email', 'Email');
        updateState({gForm: gForm}); // Keep a reference on gForm
    }

Go to solution
americo
Tera Contributor
In response to Michael Grondin

‎05-15-2020 06:17 PM

Thanks Michael, it wasn't clear at first when I looked at the other post but your insights were just right 😄

I found quite useful that gForm has some of these methods available specially those that I often use like setValue, etc. Hope others would work like addInfoMessage, showFieldMsg, would try...

hasField
getFieldNames
setLabel
setLabelOf
getLabel
getLabelOf
addDecoration
removeDecoration
setFieldPlaceholder
getEncodedRecord
isMandatory
setMandatory
isReadOnly
setReadOnly
setReadonly
setDisabled
isVisible
setVisible
setDisplay
getValue
getDisplayValue
clearValue
setValue
getTableName
getViewName
getControl
isNewRecord
getSysId
getUniqueValue
getBooleanValue
getDecimalValue
getIntValue
addOption
clearOptions
removeOption
hideRelatedList
hideRelatedLists
showRelatedList
showRelatedLists
getRelatedListNames
getSectionNames
setSectionDisplay
getReference
addErrorMessage
addWarningMessage
addInfoMessage
clearMessages
showFieldMsg
hideFieldMsg
hideAllFieldMsgs
showErrorBox
hideErrorBox
getActionName
reload
save
submit
serialize
setUserValue
isUserModified
isLiveUpdating
enableAttachments
disableAttachments
isAttachmentUploadDisabled
getEditableFields
isEditableField
insertContentAtCursor
onUserChangeValue
setVariablesReadOnly
$private
flash
getElement
getFormElement
getSections
elm

0 Helpfuls