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!"
}
}
},
It seems Chrome had some issues, it shows a blank page. I tried with Firefox and it is working.
Sorry but I have another question. I am now trying to make it dynamic. So according to the solution provided by Drew, I did the changes.When it is hard coded it is working fine. Please see the screen shot below. Ignore the duplicates for now.
But when the dynamic value is passed, probably I am missing something as I am trying to pass value of the search box to which I have assigned an Id and trying to get the value from it and pass it to the query, but the value is not being fetched. Can you tell me is this correct or is there any other way to achieve this?
