Child pages
  • Customizing the NG Client
Skip to end of metadata
Go to start of metadata

NOTE: this does not work for the Titanium NGCLient

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

  1. 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> 
  2. 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>
  3. 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>
  4. 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>
  5. 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>
  6. 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>
  7. 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>
  8. 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>
  • No labels