NOELLE Framework - Do more, with less.



Documentation
The Framework
What is the NOELLE Application?

The NOELLE Application ( or NOELLE Framework) is a robust web-based application that provides instant Create, Read, Update and Delete access to tables in a database; without having to write a single piece of code.

Historically, building web-based interfaces to maintain content in a database is time consuming, expensive, extremely repetitive, and requires a resource to write code, test code, then ultimately deploy the code to a live environment.

The NOELLE application changes all of that.

NOELLE is easy enough to be managed by individuals with no technical ability. In fact, most of our NOELLE Administrators, don't have any programming experience. In many cases, they are business application owners that require access to update data in a database without the use of SQL statements.

In many cases, NOELLE has been integrated into various existing platforms/products and re-sold.

How does the NOELLE Application work?

Once installed, the NOELLE application must initially be setup with connection settings to a database of your choosing.

Next, the administrator creates the desired "Entities." An "Entity" is a concept that establishes a link between a database table and the web page. For example, if you have a table "tbl_account" in your database, you would create a "Account" entity which registers the table with the NOELLE application.

User Types

The NOELLE application has two types of users; Administrators and Editors.

Administrators

Administrators have access to all pages and all entities. It is highly recommended to have one or two (at most) administrator accounts for each instance of NOELLE you have.

Editors

Editors have access to the Editor page as well as the Documentation page.

The Nuts & Bolts

The NOELLE application combines settings provided by the administrative user (via the System Settings page), with the inherit properties of the database table to create a Web 2.0 interface, that allows for updating, deleting and creating records. The application, right out-of-the-box, handles typical issues associated with building web-applications. Issues such as data type validation, required fields validation, data-scrubbing, search, pagination, and much more.

Because of NOELLE's exceptional design, it handles large data sets very well. Each time the application pulls data out of the database, it only pulls the data it needs. So there isn't unnecessary records being pulled from the database. NOELLE is also designed to utilize AJAX, so it only needs to load each page once; lessening the number of requests on your application server (compared to a typical web application).

Implementation Modes

The NOELLE application can be used one of two ways, as a completely standalone application or integrated into an existing site.

Standalone Mode
The standalone environment bundles together all the necessary components to provide create, read, update and delete access to a database table via the web. Utilizing the included security layer, authentication and authorization to NOELLE are all handled internally to the application and can be maintained by the user seamlessly.

One large advantage to the standalone mode, is inherit mobile compatibility. Yes, that's correct, you can view all the pages on a desktop or mobile/tablet device right out-of-the-box.

Embedded Mode

The embedded mode only requires three pieces to work properly; Javascript libraries and two "div" tags. Essentially, you'll embed into your existing website a small line of javascript, and place two containers on the page. Once container for the "List" view and another for the "Detail" view.

Learn by Example Visit the Instructional Video Section to see an example.
Installation

Standalone Installation

  1. Download noelle-X.X.X.X.zip
  2. Unzip the package in your location of choice. (C:\noelle-X.X.X.X\ is recommended).
  3. Run C:\noelle-X.X.X.X\bin\startup.sh
Security
Production Environment Recommendations
Make .property files in C:\noelle-X.X.X.X\bin\*.properties readonly.
Features
  • Sanitizing of Input - Out of the box, all input to the NOELLE application is sanitized for:
    1. Embedded Javascript
    2. Cross-Site Scripting
    3. SQL Injection
Configuration
NOELLE Data Types
  • BigDecimal
    • Decimal representation, usually used for currencies.
  • String
    • Any text value. In the NOELLE application, sanitizing of input is handled already to prevent XSS or SQL Injection attempts.
    • Represented as an Text Input field (Single Line).
  • Text
    • Any text value. In the NOELLE application, sanitizing of input is handled already to prevent XSS or SQL Injection attempts.
    • Represented as an Text Input field (Multiple Lines).
  • Long
    • Represented as an Text Input field (Single Line).
  • Boolean
    • Represented as an select box with options "True" or "False".
  • Integer
    • Represented as an Text Input field (Single Line).
  • Relation
    • Often, tables in a database are linked, this link is known as a "Relation." By selecting relation, then clicking the "Config" button, you can link your Entity to another table in the database.
  • Date
    • Represented as an Text Input field with a "Date" calendar selection box.
Editor
  • A - Entity List - This drop-down box will display all the entities that are currently configured in the "Entity Settings" page.
  • B - Search - This text input box allows the user to perform a full text search of the table.
  • C - Pagination - The NEXT and PREVIOUS buttons allow you to navigate from one page to another.


  • A - Once you tap or click a row, it turns blue.
  • B - You'll notice, once a row is selected, the "Edit" and "Delete" buttons are no longer disabled.
System Settings

The following are applicable to the Additional Settings section.

  • noelle.system.config.demo_mode
    • About: Demo mode prevents the committing of SQL transactions.
    • Allows access to the NOELLE api's without authentication.
    • Options: [true, false]
  • system.login_url=/your/custom/page/for/login
  • noelle.system.config.editor_enabled=[true,false]
  • noelle.system.config.banner_name=YOUR_BANNER_NAME
  • noelle.system.config.product_name=YOUR PRODUCT NAME
  • noelle.system.config.motto=YOUR PRODUCT MOTTO
  • noelle.system.config.log.access_file
    • About: This fully qualified file path specifies where the logging of page requests should be saved to. When using "\" as part of the file path, be sure to use double slashes ("\\") in lieu of a single slash.
    • Example: noelle.system.config.log.access_file=c:\\noelle_access_log.txt
  • login.YOUR_SCREEN_NAME.ip=YOUR_REMOTE_IP_ADDRESS
    • The login prefix registers the given IP address with the specified SCREEN_NAME. No login is required.
  • login.YOUR_SCREEN_NAME.role=administrator
    • The role suffix determines which role the specified login belongs to.
    • If administrator is used, the user has access to the "System Settings" page.
    • If no entry is specified, the user is presumed to belong to the "Editor" role
  • noelle.scanning.host_name=localhost
    • This is the Host Name or IP address of the target noelle-imaging-XXX server.
  • noelle.scanning.port=localhost
    • This is the port of the target noelle-imaging-XXX server.
    • In general, this should not be changed from 80.
  • noelle.scanning.default_source_name=
    • The name of the default scanner that should be used.
  • noelle.scanning.save_dir=
    • This directory is where the NOELLE Web Application will saved all of it's scanned and uploaded files on the file system.
  • noelle.scanning.display.compression_level=
    • Images scanned or uploaded NOELLE Web application are stored with no compression applied. When the image is displayed, compression can be applied for the images to load faster. This setting, allows you to customize your compression level based on your need. If you are scanning largely text documents, you can set your compression level high for faster loading of documents.
    • This value should be a decimal between the range of .001 (High Compression) and 1.0 (No Compression).
  • noelle.indexer_service.port=2043
    • Indexer service for file indexing and OCR (optical character recognition). Generally, this will always be 2043.
  • noelle.indexer_service.index_folder_path=y:\index\
    • The folder location where index files can be stored. This is an internal set of files used to quickly search.
  • noelle.indexer_service.index_root_folder=y:\
    • The folder location containing files/folder to be indexed.
  • email.GMAIL.username
    • The GMail username to send email addresses from.
  • email.GMAIL.password
    • The GMail password to send email addresses from.
  • docs.cloud.api.url=https://www.yourCloudServer.com/path/to/api
    • The full URL to the Noelle Web Framework cloud documents server URL API.
    • Currently this functionality is only available to private pages.
    • Once the cloud settings are in place, you'll need to update your entity settings in the "Entity Settings" page with further details.
  • docs.cloud.api.token=YOUR_CUSTOM_SECURITY_TOKEN
    • The customized security token provided to you by us.
  • docs.cloud.api.un=YOUR_USERNAME
    • The login username for the basic HTTP authentication. (Optional)
  • docs.cloud.api.pw=YOUR_PASSWORD
    • The login password for the basic HTTP authentication. (Optional)
  • docs.cloud.url=https://www.yourCloudServer.com
    • The full URL to the Noelle Web Framework cloud documents server. Be sure to leave off any trailing "/".
Entity Settings

The "Entity Settings" page is where "Entities" are configured into the NOELLE application.

  • A - Entity Selection Drop-Down Box
  • B - Source database artifact. This can be a table, or a view.
  • C - Destination database artifact. This must be a table.
  • D - Actions
    • New - Allows inserting of records into the destination table.
    • Edit - Allows updating of records in the destination table.
    • Delete - Allows deleting of records in the destination table.
    • View - Allows a user to view the record details. When selecting "New" or "Edit", "View" must also be selected.
  • E - Database column name from the source table. This is for information only.
  • F - Noelle data type selection. More Information about NOELLE data types.
  • G - When selecting a "Relation" as the NOELLE data type, additional configuration buttons are visible here.
  • H - Database data type. This is for information only.
  • I - The UI Label allows you to define how the column should be labeled. Generally, something meaningful to the end-user is entered here.


Client Side
Minimum Configuration Required:
$("#codeBuilderTableWrap").noelle({
	"entity":"Account",
	"editorWrap": $("#codeBuilderDetailWrap")
});
Pagniation & Column Sort:
"paginate":"true"
Search:
"search":"true"
Custom Search Filters:

Using this feature, you can pass the "id" of the form tag that contains any filters for this data table. This allows you to specify a collection of data filters using HTML input elements. The name of the HTML input elements must match the "column Id" of the appropriate Entity column and prefixed with a capital C. For example: C123456. Note: This feature is not yet supported on a Universe database. Also, columns with a "Relation" type is not currently supported.

"filtersFormId" : "myFormTagId" 
 ...

< form id="myFormTagId">
    
Always On Search Filter:

									
									
										
Default Sort-By Column (by column index starting with zero):
"sortBy":"0"
Default Sort-Direction Column:

For sorting ascending use 0 and to sort descending use 1

"sortDir":"0"
Implement your own custom edit function:
"customEdit": function(editDiv){
/* Your code here */ 
}
Implement your own custom edit display title:
 "customTitleEdit"  : "Your custom Title"
Implement your own custom new function:
"customNew": function(editDiv){
/* Your code here */ 
}
Implement your own custom new display title:
 "customTitleNew"  : "Your custom Title"
Implement your own custom delete function:
"customDelete": function(editDiv){
/* Your code here */ 
}
Implement your own custom pre-detail display function:

This action is executed just before the "Edit" button is clicked and the detail is displayed. For example, you might dynamically load other depedent entities at this time.

"preDetail": function(editDiv){
/* Your code here */ 
}
Implement your own custom post-detail display function:

This action is executed just after the "Edit" button is clicked and the detail is displayed. For example, you might dynamically load other depedent entities at this time.

"postDetailExisting": function(editDiv){
/* Your code here */ 
}

This action is executed just after the "New" button is clicked and the detail is displayed. For example, you might dynamically load other depedent entities at this time.

"postDetailNew": function(editDiv){
/* Your code here */ 
}
Implement your own custom post-edit display function:

This action is executed just after the "Save" button (or "Cancel" button) is clicked and the detail is saved to the database. For example, you might dynamically clear out any entities created dynamically at this time.

"postSave": function(editDiv){
/* Your code here */ 
}
Technical Requirements
Currently the following databases are supported for Create/Read/Update/Delete:
  • Microsoft SQL Server 2000
  • Microsoft SQL Server 2005
  • Microsoft SQL Server 2008
  • Microsoft SQL Server 2008 R2
  • Microsoft SQL Server 2012
  • Microsoft SQL Server 2014
The NOELLE web application can run in any compliant J2EE Servlet container.
System Requirements
NOELLE Bundled with Apache Tomcat
  • Minimum 2 GB Memory
  • Minimum 1 GB Disk Space

Note: When utilizing Embedded Mode, your system requirements will vary depending on your platform. Contact us to connect with a dedicated technologist to walk through your specific implementation details.

Self Service Password Reset
The Noelle Web Framework comes with login page that allows users to reset a password from an email address that is already in the system. It is not enabled by default for security reasons, but below are the prerequisites for this feature.
  • Imported the "Self Service Login Page" through the System Settings page.
  • You have a valid Google G-Mail account and have the username and password.
  • You have set two properties in the System Settings page: 1) email.GMAIL.username 2) email.GMAIL.password
Javascript API
Iterate over data
$().iterate( 'MyEntity', 
	        function(row, index){ 
			//todo for each row of data.
		},
		function(){
			//todo when no data exists.
		},
		1,  //page index 1-n
		10, //page size
		''  //search query
);			
Get User Data
val authid = $().getEnv()['AUTH']['ID'];			
		   		{
					"RESULT": "OK",
					"AUTH": {
						"ID": "500001",
						"NAME": "",
						"UN": "michael"
					},
					"DT": "2016-11-02 15:40",
					"DATE": "2016-11-02"
				}