FC pages are structured similarly to ServiceNow widgets, encapsulating the template, client script, and server script into a unified entity. Adopting the MVC (Model-View-Controller) approach, the server script generates the model object, which is passed to the client for manipulation or transformation. The transformed data is then rendered through the template for presentation.
This server script is designed to execute automatically when the page is requested, initializing a model that helps control access to the page based on the current logged-in user. The script uses URL parameters (params) to pass additional data, if needed.
(function (params) {
function initialize() {
var model = {
condition: true
};
return model;
}
return {
initialize: initialize
};
})(params);
Key Components
Return Object
The script returns an object containing the initialize method and any additional methods you implement. These methods, if included in the returned object, can be invoked directly from the client script. This setup facilitates seamless communication between the client and server, allowing the client script to make requests to the server script as needed.
The params parameter, representing data from the URL, can be used in conjunction with user information to adjust logic dynamically within both the initialize method and any other implemented methods.
The client script contains an execute function, which is automatically invoked when the page loads. It provides methods that can be accessed and used within the template.
function execute(helpers){
function myFunction(){
return 'Hello World!';
}
return {
myFunction: myFunction
};
}
Key Components
Key Parameters
Return Object
The execute method returns an object with methods, such as myFunction, that can be accessed and used in the template. The use of the helpers parameter ensures that the client script has access to important contextual information and services, while keeping the model for initialization purposes separate from the model used in the template.
Example Usage of call Method Calls a server-side method via REST API.
call(methodName: string, parameters: any[] = [], pageId?: string)
service.call('getPageData', ['param1', 'param2'], 'page123')
.then(response => {
console.log('Success:', response);
})
.catch(error => {
console.error('Error:', error);
});
OR
try {
const response = await service.call('getPageData', ['param1', 'param2'], 'page123');
console.log('Success:', response);
} catch (error) {
console.error('Error:', error);
}
In the example above, 'getPageData' is a method returned from the server script.
Example Usage of search Method Navigates to a specific page, optionally passing query parameters.
search(query: any)
const searchQuery = { term: 'keyword', filter: 'active' };
service.search(searchQuery);
Example Usage of navigateToPage Method Navigates to a specific page, optionally passing query parameters.
navigateToPage(pageId: string, queryParams: any = )
service.navigateToPage('page456', { section: 'overview', userId: 'user789' });
Example Usage of navigate Method Navigates directly to a URL.
navigate(url: string)
service.navigate('?id=home');
Example Usage of snackbar Method Displays a message in a Snackbar UI component.
snackbar(message: string)
service.snackbar('Data saved successfully!');
Example Usage of showLoading/hideLoading Method Shows a loading indicator/Hides the loading indicator
service.showLoading() service.hideLoading();
service.showLoading();
// Some async operation
service.hideLoading();
Example Usage of confirm Method Displays a confirmation dialog with a message and returns an observable with the user's response.
confirm(message: string): Observable<boolean>
service.confirm('Are you sure you want to delete this item?').subscribe(result => {
if (result) {
console.log('User confirmed');
} else {
console.log('User canceled');
}
});
Example Usage of postAsync Method Sends an asynchronous POST request with a payload.
postAsync(url: string, payload: any)
const payload = { name: 'John Doe', role: 'admin' };
service.postAsync('/api/user/create', payload)
.then(response => {
console.log(response);
});
```
Example Usage of getAsync Method Sends an asynchronous GET request to retrieve data.
getAsync(url: string)
service.getAsync('/api/user/list')
.then(response => {
console.log(response);
});
This template is designed to create a dynamic, interactive interface using Alpine.js for reactivity. This template is structured to maximize reactivity and data flow between the client-side and server-side scripts, using Alpine.js to manage interactivity. By encapsulating data and methods in the $scope variable, it simplifies the flow of information between the server and the user interface. The design allows for dynamic rendering and filtering, creating an interactive and responsive user experience.
Key Components of the Template
Click for more information on AlpineJS, Bootstrap 5