Hi there,
I previously posted this question as having issues to pull data from ServiceNow but now I'm successful doing that, How did I fix this?
First of all, before using now-cli develop make sure you do the follow steps:
1) Even though the web site says to not include password, please make sure you have included it in your now-cli.json as per below example:
2) Log to your PDI (Personal Instance) using: now-cli login --host "https://<your instance>.service-now.com" --username user --password password
3) Then start local server using now-cli develop
4) You won't have issues while calling Http Effects
Boila! you can now enjoy and develop your custom component
You can use below code in your local environment and once you are ready you can deploy it to your PDI, refer to the screenshot of how it looks like once deploy (you must set it up in your UI Builder)
Example:
import {createCustomElement, actionTypes} from '@servicenow/ui-core';
import {createHttpEffect} from '@servicenow/ui-effect-http';
import snabbdom from '@servicenow/ui-renderer-snabbdom';
import styles from './styles.scss';
const {COMPONENT_BOOTSTRAPPED} = actionTypes;
const USER_FETCH_REQUESTED = "USER_FETCH_REQUESTED";
const USER_FETCH_SUCCEEDED = "USER_FETCH_SUCCEEDED";
const USER_FETCH_FAILED = "USER_FETCH_FAILED";
const ACTION_ON_DISMISS = "ACTION_ON_DISMISS";
const ACTION_ON_SEARCHCHANGE = "ACTION_ON_SEARCHCHANGE";
const onDismiss = (coeffects) => {
const {action, state, updateState} = coeffects;
const isNotId = item => item.sys_id !== action.payload.id;
const updatedList = state.result.filter(isNotId);
updateState( { result: updatedList } );
};
const onSearchChange = (coeffects) => {
const {action, updateState} = coeffects;
updateState( { searchTerm: action.payload.searchTerm } );
};
const fetchUsers = createHttpEffect(`api/now/table/sys_user?sysparm_limit=10&sysparm_query=nameLIKEAnna`, {
queryParams: ["sysparm_limit=10"],
successActionType: USER_FETCH_SUCCEEDED,
errorActionType: USER_FETCH_FAILED,
});
const parseResponse = (coeffects) => {
const {action, updateState} = coeffects;
updateState( { result: action.payload.result } );
};
const view = (state, {updateState, dispatch}) => {
const welcome = "Welcome to UI-Components";
const {searchTerm} = state;
return (
<div>
<h2>{welcome}</h2>
<div>
Name: <input
type="text"
value={searchTerm}
on-change={(event) => dispatch(ACTION_ON_SEARCHCHANGE, { searchTerm: event.target.value })}
/>
<button
type="button"
on-click={(event) => dispatch(USER_FETCH_REQUESTED)}
>
Search
</button>
</div>
<div><span>Showing results for: {searchTerm}</span></div>
{
state.result ?
state.result.map(item => {
const url = "./sys_user.do?sys_id=" + item.sys_id;
return (
<div key={item.sys_id}>
<span><a href={url}>{item.user_name}</a></span>
<span>{item.name}</span>
<span>{item.email}</span>
<span>{item.sys_created_on}</span>
<span>
<button
on-click={() => dispatch(ACTION_ON_DISMISS, { id: item.sys_id })}
type="button"
>
Dismiss
</button>
</span>
</div>
)
})
: null
}
</div>
);
};
createCustomElement('x-34391-example-http-01', {
renderer: {type: snabbdom},
initialState: {
result: null,
searchTerm: 'Anna',
},
/*eventHandlers: [{
events: ['click'],
effect({action: {payload: {event, host}}}) {
console.log(event);
console.log(host);
},
}],*/
actionHandlers: {
[ACTION_ON_DISMISS]: {
effect: (coeffects) => onDismiss(coeffects),
args: [],
interceptors: [],
stopPropagation: true
},
[ACTION_ON_SEARCHCHANGE]: {
effect: (coeffects) => onSearchChange(coeffects),
args: [],
interceptors: [],
stopPropagation: true
},
[USER_FETCH_SUCCEEDED]: {
effect: (coeffects) => parseResponse(coeffects),
args: [],
interceptors: [],
stopPropagation: true,
},
[USER_FETCH_FAILED]: {
effect: (coeffects) => parseResponse(coeffects),
args: [],
interceptors: [],
stopPropagation: true,
},
[USER_FETCH_REQUESTED]: fetchUsers,
[COMPONENT_BOOTSTRAPPED]: {
effect: (coeffects) => {
const {dispatch} = coeffects;
dispatch('USER_FETCH_REQUESTED');
},
args: [],
interceptors: [],
stopPropagation: true,
},
},
view,
styles,
});
​ "components": {
"x-34391-example-http-01": {
"innerComponents": [],
"uiBuilder": {
"associatedTypes": ["global.core"],
"label": "Magic",
"icon": "chat-fill",
"description": "Magic!"
}
}
},
Hi Tommy,
You can add your custom component to show in incident by creating a Contextual Side Panel record. Simply go to Actions & Components then Contextual Side Panel and create new. There you can define which component to use and for which table should show in agent workspace, the Advanced view lets you define conditions and roles of who can see this component.
