Customizing the NG Client

The following NG Client html templates can be customized by placing them in a templates folder in ROOT (application_server/server/webapps):

dialog.html

Dialog template example

	<div class="svy-dialog" svy-window sablo-tabseq='1' sablo-tabseq-config="{container: true}"  bindonce bo-class="{'window':!isUndecorated(), '{{win.cssClassName}}':win.cssClassName}"  
				  bo-style="{'background-color':win.transparent ? 'transparent':'inherit'}" >
		<div bo-style="{'opacity':win.opacity}">
			<div  class='window-header'
				  bo-style="{'display':isUndecorated()? 'none':'block'}"  tabindex="-1"  style="outline:0;">
				<button type="button" class="svy-dialog-close"
					ng-click="cancel()"
					aria-hidden="true" tabindex="-1">x</button>
				<h4 class="window-title"  ng-bind='win.title'></h4>
			</div>	
		    <div class="window-body" 
		    	 bo-style="getBodySize()">
		    	 <div ng-if="win.navigatorForm.name" ng-style="{'width':win.navigatorForm.size.width+'px'}"
					  ng-include="getNavigatorFormUrl()" unwanted-dialog-scrollbars-workaround></div>
				 <div id="tabStart" sablo-tabseq='1' ng-focus="firstElementFocused()"></div>
		    	 <div sablo-tabseq='2' sablo-tabseq-config="{container: true}" ng-include="getFormUrl()"  
		    	      ng-style="{'position':'absolute','top':'0px','right':'0px','bottom':'0px','left':win.navigatorForm.size.width+'px'}" unwanted-dialog-scrollbars-workaround></div>
				 <div id="tabStop" sablo-tabseq='3' ng-focus="lastElementFocused()"></div>	    	 
		    </div>    
			<div class="window-footer"
				 bo-style="{'display':isUndecorated()? 'none':'block'}"></div>
		</div>
	</div>

login.html

Login template example

	<div class=" modal-header">
  		<img src="templates/logo2.gif" class="img-responsive">
 	</div>
  	<div class="modal-body">
  	    <h3 class="svy-login-title">Please sign in</h3>
  		<h5 class="svy-login-text-danger">{{model.message}}</h5>
    	<form   accept-charset="UTF-8" role="form" ng-submit="doLogin()">
		<fieldset class="svy-login-fieldset">
    	  	<div class="svy-login-form-group">
    		    <input class="svy-login-form-control" placeholder="Username" type="text" ng-model="model.username">
    		</div>
    		<div class="svy-login-form-group">
    			<input class="svy-login-form-control" placeholder="Password" type="password" ng-model="model.password">
    		</div>
    		<div class="checkbox">
    	    	<label>
    	    		<input name="remember" type="checkbox" value="Remember Me" ng-model="model.remember"> Remember me
    	    	</label>
    	    </div>
    		<input class="svy-btn svy-btn-success svy-btn-block" type="submit" value="Login">
    	</fieldset>
      	</form>
    </div>

maintenanceView.html

Maintenance page example

<div style='padding:40px;' ng-controller="MaintenanceModeController">
	<div class="bs-callout bs-callout-warning" >
	<h4>The server is in maintenance mode</h4>
	<p>The server is in maintenance mode; please try again later.</p>
	<p><a ng-href="{{redirectUrl}}">Return to home page</a></p>
	</div>
</div>

notSupportedBrowser.html

Not supported browser page example

<html>
<head>
	<link rel="stylesheet" href="/css/bootstrap/css/bootstrap.css"/>
	<link rel="stylesheet" href="/css/servoy.css"/>
</head>
<body>
<div style='padding:40px;'>
	<div class="bs-callout bs-callout-danger" >
	<h4>Page cannot be displayed</h4>
	<p>You are using an old, unsupported browser version.</p>
	</div>
</div>
</body>
</html>

serverInternalErrorView.html

NG Client Error page example

<div style='padding:40px;' ng-controller="InternalServerErrorController">
    <div class="bs-callout bs-callout-danger" >
    <h1>Internal Server error </h1>
    <p>There was an error at the server side</p>
    <pre ng-if='error.stack' ng-bind='error.stack'></pre>
    </div>
</div>

serverTooBusyView.html

Server too busy page

<div style='padding:40px;' ng-controller='NoLicenseController' >
	<div class="bs-callout bs-callout-danger" >
	<h1>The server is too busy</h1>
	<p>The server is too busy; please try again later.</p>
	<p><a ng-href="{{redirectUrl}}">Return to home page</a></p>
	</div>
</div>

sessionExpiredView.html

NG Client Page expired example

<div style='padding:40px;' ng-controller="SessionExpiredController">
    <div class="bs-callout bs-callout-danger" >
    <h1>Page Expired</h1>
    <p>The page you requested has expired.</p>
    <p><a ng-href="{{redirectUrl}}">Return to home page</a></p>
    </div>
</div>

upload.html

Upload dialog example

<div class="svy-upload">
	<h4 class="svy-upload-header-txt">{{getTitleText()}}</h4>
	<table class="svy-upload-table" ng-if="isFileSelected()">
		<caption>{{::i18_selectedFiles}}</caption>
		<thead><tr><th>{{::i18n_name}}</th><th></th></tr></thead>
		<tr ng-repeat="f in getUploadFiles()"><td>{{f.name}}</td><td><div class="svy-btn svy-btn-danger" ng-click="doRemove(f)">{{::i18n_remove}}</div></td></tr>
	</table>
	<div ng-if="!isFileSelected()"><span>{{::i18n_nothingSelected}}</span></div>
	<br>
	<div class="svy-btn svy-btn-primary" ngf-select ng-model="uploadFiles" ngf-multiple="isMultiSelect()">{{::i18n_chooseFiles}}</div>
   	<div class="svy-btn svy-btn-success" ng-click="doUpload()">{{::i18n_upload}}</div>
   	<div class="svy-btn svy-btn-info" ng-click="dismiss()">{{::i18n_cancel}}</div>
   	<br><br>
   	<div class="svy-progress">
	  <div class="svy-progress-bar" role="progressbar" aria-valuenow="{{getProgress('')}}" aria-valuemin="0" aria-valuemax="100" style="width: {{getProgress('%')}};">
	    {{getProgress('%')}}
	  </div>
	</div>
   	<div><strong>{{errorText}}</strong></div>
</div>

Child pages

Customizing the NG Client