Single Form Custom Page Template
- Last UpdatedJun 22, 2023
- 2 minute read
Use this Custom Page template to load a form in a custom page.
<!doctype html>
<html>
<head>
<title>Loading a Form</title>
<meta http-equiv="content-type" content="Type=text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../Common/JavaScripts/spin.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/knockout.min.js"></script>
<script type="text/javascript" src="js/xml2json.min.js"></script>
<script type="text/javascript" src="app/Skelta.min.js"></script>
<script type="text/javascript" src="js/kendodependencies.min.js"></script>
<script type="text/javascript" src="js/kendo.all.min.js"></script>
<script type="text/javascript" src="js/knockout-kendo.min.js"></script>
<script type="text/javascript" src="js/date.min.js"></script>
<link rel="stylesheet" href="css/SkeltaForms.min.css" />
<link rel="stylesheet" href="css/SkeltaTabs.min.css" />
<link rel="stylesheet" href="css/kendo.common.min.css" />
<link rel="stylesheet" href="css/kendo.default.min.css" />
<link rel="stylesheet" href="../CommonUXControls/StyleSheet/se.ui.min.css" />
<link rel="stylesheet" href="../CommonUXControls/StyleSheet/UXControls.min.css" />
<script type="text/javascript">
var skeltaUtils = skelta.forms.utilities;
skelta.DeviceOS = "Web";
var logger = skeltaUtils.getLogger();
var appName = "<Repository Name>";
var userId = "<User ID>";
var formName = "<Form Name>";
var formVersion = "<Form Version>";
var formId = "<Form ID>";
var listName = "Forms List";
$(document).ready(function ()
{
var spinnerEl = skeltaUtils.getLoaderObject();
$("#skloader")[0].appendChild(spinnerEl);
skelta.userContext.setUserContextFor("appN", appName);
skelta.userContext.setUserContextFor("uId", userId);
skelta.userContext.setUserContextFor("fName", formName);
skelta.userContext.setUserContextFor("vStamp", formVersion);
skelta.userContext.setUserContextFor("itemId", formId);
skelta.userContext.setUserContextFor("listName", listName);
skeltaUtils.loadPageDefault();
loadViewAndViewModelFromServer();
});
function loadViewAndViewModelFromServer()
{
var jsonHelper = skeltaUtils.createJsonRequestHelper({
"applicationName": appName,
"userId": userId,
"formName": formName,
"versionStamp": formVersion,
"listName": listName,
"deviceType": "Web"
});
skeltaUtils.callServerMethod("GET",
skeltaUtils.getServerUrl("NextGenFormService.aspx/GetViewAndViewModel"),
"application/json; charset=utf-8",
jsonHelper,
"json",
loadViewAndViewModelSucceeded,
loadViewAndViewModelFailed,
function ()
{
skeltaUtils.pageLoadComplete("");
});
}
function loadViewAndViewModelSucceeded(resultData)
{
$("#viewModel").html(JSON.parse(resultData["d"])["ViewAndViewModel"]);
var viewModelObject = skeltaUtils.getViewModelObject(skeltaUtils.getFormUniqueKey(appName, formId, formVersion));
// Form Finish Click Event
viewModelObject.onSave.subscribeEvent(onFormFinish);
// Form Cancel Click Event
viewModelObject.onCancel.subscribeEvent(onFormCancel);
skelta.localize.divTextLocalize();
skelta.localize.divTitleLocalize();
$("#viewModel")[0].style.display = "";
viewModelObject.topLevelForm.initializeFocus(0);
skelta.forms.delay.loader.scrollEventHandler();
}
function loadViewAndViewModelFailed(result)
{
skeltaUtils.showError(document.title, skelta.localize.getString("FormNGFFillFormAjaxFailed").replace("<@paramApplicationName@>", appName).replace("<@paramFormName@>", formName).replace("<@paramVersionStamp@>", formVersion).replace("<@status@>", result.status).replace("<@statusText@>", result.statusText).replace("<@responseText@>", result.responseText));
logger.logError(skelta.localize.getString("FormNGFFillFormAjaxFailed").replace("<@paramApplicationName@>", appName).replace("<@paramFormName@>", formName).replace("<@paramVersionStamp@>", formVersion).replace("<@status@>", result.status).replace("<@statusText@>", result.statusText).replace("<@responseText@>", result.responseText));
skelta.forms.utilities.hideLoader();
}
function onFormFinish(data, evt)
{
//
// Add code for required action to be performed, when Finish button is clicked.
//
skeltaUtils.showAlert(document.title, data.InstanceJSON);
//
// Use values of Forms Parameters as required
//
}
function onFormCancel(data, evt)
{
//
// Add code for required action to be performed, when Cancel button is clicked.
//
skeltaUtils.showAlert(document.title, "Form - Cancel clicked");
}
</script>
</head>
<body style="margin: 0;">
<div id="skloader" class="skloader" data-skloader="1" style="height: 100%; width: 100%; position: absolute;"></div>
<form class="sksa">
<div id="viewModel" style="display: none;">
</div>
</form>
</body>
</html>