Hello 🙂
To use server-side script on Button Event in UI Builder please follow these steps:
Use Flow designer:
- Create Action which includes 'Script step'
- Put your backend script there, save
- Create subflow
- First action is your custom action defined above
- Second action is 'Assign Subflow Outputs'. At first define the output variables, then using this action connect them with outputs from custom Action by using data pills
- Save the subflow, use three dots in top-right corner, go to 'Create code snippet'
Go to Scripted REST APIs [sys_ws_definition]:
- Create a new entry which will serve as a base API path
- Save it, then in related tabs at the bottom go to Resources and create a new one
- You'll be moved to Scripted REST Resource page - new record.
- Fulfill name, HTTP Method, Relative path
- In Script field use the following one:
(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response) {
try{
var result = sn_fd.FlowAPI.getRunner().subflow('/*SCOPE.NAMEOFSUBFLOW*/').inForeground().run();
var outputs = result.getOutputs();
response.setBody(outputs);
} catch(ex){
var message = ex.getMessage();
gs.error(message);
}
})(request, response);
- Go to Related Links, then Explore REST API
- Click Send, check if the response body contains correct outputs - if not, then review previous steps
- Copy the relative path of your API - you can find it back on Scripted REST service page in Resources tab in column 'Resource path'
Go to UI Builder:
- In the bottom left corner open the ID card tab which stands for Client state parameters
- Create corresponding variables for outputs from previously created Subflow
- In the bottom left corner open the ' </>' tab which stands for Page scripts
- Add a new one, name it as you wish
- Here use following script:
function handler({api, event, helpers, imports}) {
helpers.snHttp('/*YOUR RELATIVE PATH TO METHOD*/', {method: 'YOUR METHOD, E.G. GET'})
.then(({response: {result}}) => {
api.setState('/*YOUR CLIENT STATE PARAMETER NAME*/', result./*YOUR OUTPUT VARIABLE*/);
/*copy above for each variable*/
})
.catch(({error}) => {
const message = `Error: ${error.data.error.message}`;
console.error(message);
});
}
- Go to your button -> Events -> Choose your page script
- Save the page, go to your page directly and check the solution
- Enjoy! 😃
