Client Folder Structure

Home / Developer / Folder Structure

PxStat Application Client Side folders and code files list, includes configuration and examples.

1. Root folder files

Root folder files - Details

1.1. index.html is the entry page for application (https://domain.name/index.html#) The file contains all necessary HTML setting and external java script libraries (CDN), CSS, icons,fonts, Client-Side Applications constants, configurations and libraries. The file also contains the main HTML structure for the Client Side Applications and java script code: index.js.

1.2 index.js Runs document.ready after the index.html has loaded and loads the following:.

• Navigation Menu (navigation.html),
• Header (header.html),
• Footer (footer.html),
• Spinner, Modals, alerts etc,
• Load default Navigation Menu “Data” ("entity/data/", "#nav-link-data")

// Default entity on page load displays the Data Page
  api.content.goTo("entity/data/", "#nav-link-data");

1.3 config.json

Contains Client-Side applications default configuration parameters and constants.

Example:

• Default System Language: language.iso.code

"language": {
		"iso": {
			"code": "en",
			"value": "English"
		}
	},

• Default System Date Display: mask.datatime.display

"mask": {
		"datatime": {
			"ajax": "YYYY-MM-DDTHH:mm:ss",
			"display": "DD/MM/YYYY HH:mm:ss",
			"file": "YYYYMMDDTHHMMss",
			"dateRangePicker": "DD/MM/YYYY HH:mm"
		}	
	},

Each Deployment environment have specific config.json file:

• config.json.live
• config.json.td
• config.json.uat

---

2. Root folder - Template Folder

Root folder - Template Folder - Details

The template folder contains HTML, CSS, java script template files loaded at application start (index.js).

• template\footer.html - footer html markup
• template\header.html - header html markup
• template\modal.group.html - modal.group html markup
• template\modal.html - modal html markup
• template\modal.user.html - modal.user html markup
• template\navigation.html - navigation html markup
• template\css folder - definition CSS styling for HTML temnplates

• template\css\navigation.css
• template\css\footer.css
• template\css\header.css

• template\js folder - definition java script code for HTML templates

• template\js\navigation.library.js
• template\js\entity.js
• template\js\footer.js
• template\js\header.js
• template\js\navigation.js

---

3. Root folder - css Folder

Root folder - css Folder - Details

The template folder contains CSS styling definitions for Application and specific java script libraries.

• css\app.bootstrap.guideline.css - bootstrap base styling definition
• css\app.bootstrap.override.css - specific override bootstrap base styling definition
• css\app.library.css - Application library specific styling definition
• css\app.media.css - Application media library specific styling definition
• css\app.prism.css - Application prism base library specific styling definition
• css\app.prism.override.css - Application override prism library specific styling definition
• css\app.xbbcode.css - Application xbbcode library specific styling definition

---

4. Root folder - js Folder

Root folder - js Folder - Details

The template folder contains java script code for Specific Application and specific 3rd Party libraries.

• js\app.bootstable.js - java script code for Specific bootstable library
• js\app.config.js - java script code for Specific Application config (Load config.json file)
• js\app.constant.js - java script code for Specific Application constant (Definitions of constant)
• js\app.global.js - java script code for Specific Application - DEPRECATED
• js\app.library.group.js - java script code for Specific Application group shared library
• js\app.library.js - java script code for Specific Application shared library
• js\app.library.user.js- java script code for Specific Application usershared library
• js\app.mindmup.editabletable.js - java script code for Specific mindmup.editabletable library
• js\app.plugin.js - java script code for Specific plugin library
• js\app.prism.js - java script code for Specific prism library
• js\app.twbs-pagination.min.js - java script code for Specific twbs-paginationlibrary
• js\app.xbbcode.js - java script code for Specific xbbcode library

---

5. Root folder - Entity Folder

Root folder - Entity Folder - Details

The entity folder contains HTML, CSS, java script code for Specific Applications.

• entity\build - HTML, CSS, java script code for Build Application
• entity\configuration - HTML, CSS, java script code for Configuration Application
• entity\data - HTML, CSS, java script code for Data Application
• entity\developer - HTML, CSS, java script code for Developer Application
• entity\keyword - HTML, CSS, java script code for Keyword Application
• entity\manage - HTML, CSS, java script code for Manage Application
• entity\release - HTML, CSS, java script code for Release Application
• entity\upload - HTML, CSS, java script code for Upload Application

Example the Upload Application:

• Web browser screen shot

• Folder structure screen shot