+
Additional Information From the Record:
+
OCLCID:
+
{{oclcid}}
+```
+``` ```
+
+
+
+
+
+
+**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
+
+To add the link to the full record you can either:
+ 1. Use the
+
+ ```
+
+
+ ```
+directive in your template - This includes the link to the record
+
+2. Use the following code snippet in your template:
+
+ ```
+
+ {{item.pnx.display.title[0]}}
+
+ ```
+
+To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
+
+ ```
+
+
+
+
+ ![]()
+ |
+
+
+
+```
+
+
+ ## Examples
+
+ Full examples of email templates can be found in the help files folder folder:
+
+ 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
+
+ 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
+ will produce the following email:
+
+ 
+
+ 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
+ will produce the following email:
+
+ 
+
+
+
+
diff --git a/tests/manual/TESTBROWSERIFY/html/home_en_US.html b/tests/manual/TESTBROWSERIFY/html/home_en_US.html
new file mode 100644
index 000000000..96b69aa8e
--- /dev/null
+++ b/tests/manual/TESTBROWSERIFY/html/home_en_US.html
@@ -0,0 +1 @@
+Customized
diff --git a/tests/manual/TESTBROWSERIFY/img/README.md b/tests/manual/TESTBROWSERIFY/img/README.md
new file mode 100644
index 000000000..eb4c0bb82
--- /dev/null
+++ b/tests/manual/TESTBROWSERIFY/img/README.md
@@ -0,0 +1,20 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+## images documentation
+
+ - Primo allows the customization of the following images;
+ 1. Library Logo - just place a file named `library-logo.png` in this location
+ 2. Library favicon - just place a file named `favicon.ico` in this location
+ 3. Default Resource Types - just place a files following this convention :
+ `icon_
.png`
+
+ For Example:
+ `icon_book.png`
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTBROWSERIFY/img/icon_book.png b/tests/manual/TESTBROWSERIFY/img/icon_book.png
new file mode 100644
index 000000000..048bdfe88
Binary files /dev/null and b/tests/manual/TESTBROWSERIFY/img/icon_book.png differ
diff --git a/tests/manual/TESTBROWSERIFY/img/library-logo.png b/tests/manual/TESTBROWSERIFY/img/library-logo.png
new file mode 100644
index 000000000..4889cb614
Binary files /dev/null and b/tests/manual/TESTBROWSERIFY/img/library-logo.png differ
diff --git a/tests/manual/TESTBROWSERIFY/js/README.md b/tests/manual/TESTBROWSERIFY/js/README.md
new file mode 100644
index 000000000..cfc360d7a
--- /dev/null
+++ b/tests/manual/TESTBROWSERIFY/js/README.md
@@ -0,0 +1,275 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+## JavaScript documentation
+
+- When you want to add functionality to your Primo installation you will be using Angular Directives.
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework:
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+## Concept
+
+- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
+- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
+- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
+- Use the examples below as starting points for your JavaScript plug-in directives
+- Learn about Angular Directives to better understand the different abilities this workflow offers
+> https://docs.angularjs.org/guide/directive
+
+
+
+## Recipes/Examples:
+
+# Note:
+
+The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
+This causes the examples to fail on IE11 browsers.
+
+To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
+
+
+
+
+# JavaScript Recipe 1 - a Static `hello world` html Message
+
+
+- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
+, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+
+
+
+
+- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
+for the `prmSearchBarAfter` directive
+
+ ```
+ app.component('myInstitutionComponent', {
+
+
+ });
+
+ app.component('prmSearchBarAfter', {
+
+
+ });
+ ```
+- Add the template property with your static message
+
+ ```
+ app.component('myInstitutionComponent', {
+ template: `Hello World`
+ });
+ ```
+- Add the template property with your component template (myInstitutionComponent)
+
+ ```
+ app.component('prmSearchBarAfter', {
+ bindings: {parentCtrl: `<`},
+ template: ``
+ });
+ ```
+
+
+- Save and refresh your browser
+
+
+
+# JavaScript Recipe 2 - a Dynamic Directive
+- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+- Run the following command in your browsers' console tab:
+```
+ angular.reloadWithDebugInfo()
+```
+- Focus on the `prmSearchBarAfter` directive
+
+
+
+- Run the following command in your browsers' console tab:
+```
+ angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
+```
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+
+
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller with 2 getter methods to return the query and selected scope
+```
+app.controller('MyInstitutionComponentController', [function () {
+ var vm = this;
+
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+
+ function getSelectdScope() {
+ return vm.parentCtrl.scopeField;
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+ }]);
+
+```
+- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to reference the getter methods
+```
+template: `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
\r\n
\r\n \r\n \r\n This is a demo presenting the ability to display query\r\n information below the search box\r\n Query: {{$ctrl.getQuery()}}\r\n Scope: {{$ctrl.getSelectdScope()}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Action 1\r\n Action 2\r\n \r\n \r\n
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
+
Additional Information From the Record:
+
OCLCID:
+
{{oclcid}}
+```
+``` ```
+
+
+
+
+
+
+**Notice :** Any link in your template will be removed - for security reasons, we will not allow links other than the link to the record to avoid email exploits.
+
+To add the link to the full record you can either:
+ 1. Use the
+
+ ```
+
+
+ ```
+directive in your template - This includes the link to the record
+
+2. Use the following code snippet in your template:
+
+ ```
+
+ {{item.pnx.display.title[0]}}
+
+ ```
+
+To use your library logo (not the OTB
) you can use your own html, with an img element that has a class attribute of *logo-image* immediatly following the opening tag, for example:
+
+ ```
+
+
+
+
+ ![]()
+ |
+
+
+
+```
+
+
+ ## Examples
+
+ Full examples of email templates can be found in the help files folder folder:
+
+ 1. [The Out of the Box template for emails](../../help_files/email_en_US.html) email_en_US.html
+
+ 2. [A template based on the OTB - brief + custom fields + availability](../../help_files/email_en_US-brief+additionalField+availability.html)
+ will produce the following email:
+
+ 
+
+ 3. [A template based on an open source email template with no Primo directives - just use of the ```{{item.pnx.display.title}}```](../../help_files/email_en_US_Details.html)
+ will produce the following email:
+
+ 
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/html/home_en_US.html b/tests/manual/TESTCONCAT/html/home_en_US.html
new file mode 100644
index 000000000..96b69aa8e
--- /dev/null
+++ b/tests/manual/TESTCONCAT/html/home_en_US.html
@@ -0,0 +1 @@
+Customized
diff --git a/tests/manual/TESTCONCAT/img/README.md b/tests/manual/TESTCONCAT/img/README.md
new file mode 100644
index 000000000..eb4c0bb82
--- /dev/null
+++ b/tests/manual/TESTCONCAT/img/README.md
@@ -0,0 +1,20 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+## images documentation
+
+ - Primo allows the customization of the following images;
+ 1. Library Logo - just place a file named `library-logo.png` in this location
+ 2. Library favicon - just place a file named `favicon.ico` in this location
+ 3. Default Resource Types - just place a files following this convention :
+ `icon_
.png`
+
+ For Example:
+ `icon_book.png`
+
+
+
+
+
+
+
diff --git a/tests/manual/TESTCONCAT/img/icon_book.png b/tests/manual/TESTCONCAT/img/icon_book.png
new file mode 100644
index 000000000..048bdfe88
Binary files /dev/null and b/tests/manual/TESTCONCAT/img/icon_book.png differ
diff --git a/tests/manual/TESTCONCAT/img/library-logo.png b/tests/manual/TESTCONCAT/img/library-logo.png
new file mode 100644
index 000000000..4889cb614
Binary files /dev/null and b/tests/manual/TESTCONCAT/img/library-logo.png differ
diff --git a/tests/manual/TESTCONCAT/js/README.md b/tests/manual/TESTCONCAT/js/README.md
new file mode 100644
index 000000000..cfc360d7a
--- /dev/null
+++ b/tests/manual/TESTCONCAT/js/README.md
@@ -0,0 +1,275 @@
+# The Primo New UI Customization Workflow Development Environment
+
+
+## JavaScript documentation
+
+- When you want to add functionality to your Primo installation you will be using Angular Directives.
+
+- To learn more about directives see:
+> https://docs.angularjs.org/guide/directive
+
+- Primo uses external directives from the Angular-material framework:
+> https://material.angularjs.org/latest/
+
+- Those directives are tagged by a prefix : "md-"
+
+- Primo also creates its own directives which are tagged by the "prm-" prefix.
+
+
+Example:
+```
+
+```
+
+
+- You can see in the example how we use :
+
+1. An HTML5 tag - header
+2. A Primo directive : prm-topbar , prm-search-bar.
+3. An external material design directive : md-progress-bar :
+> https://material.angularjs.org/latest/api/directive/mdProgressLinear
+
+
+
+## Concept
+
+- When You want to add your own JavaScript functionality - you will need to plug-in to placeholder Directives we added to the system, by creating your own placeholder Directive.
+- Those directives are added as the last child element for every Primo directive (defined by the `prm-` prefix)
+- The placeholder directives are injected (as input) with the Controller of their parent, thus have access to the data model of the parent directive
+- Use the examples below as starting points for your JavaScript plug-in directives
+- Learn about Angular Directives to better understand the different abilities this workflow offers
+> https://docs.angularjs.org/guide/directive
+
+
+
+## Recipes/Examples:
+
+# Note:
+
+The examples below use the back tic '`' for templates - which will work using babel (Documentation on how to do so will be shared)
+This causes the examples to fail on IE11 browsers.
+
+To solve this you can replace the '`' with regular apostrophe ("'") and use a single line template (less readable but works just as well).
+
+
+
+
+# JavaScript Recipe 1 - a Static `hello world` html Message
+
+
+- Use the `showDirectives` (located in the root directory of this package is the showDirectives.txt file
+, just add the content of the file as a bookmark to your browser) scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+
+
+
+
+- Edit the primo-explore/custom/js/custom.js file and add a component declaration for `myInstitutionComponent` and a component declaration
+for the `prmSearchBarAfter` directive
+
+ ```
+ app.component('myInstitutionComponent', {
+
+
+ });
+
+ app.component('prmSearchBarAfter', {
+
+
+ });
+ ```
+- Add the template property with your static message
+
+ ```
+ app.component('myInstitutionComponent', {
+ template: `Hello World`
+ });
+ ```
+- Add the template property with your component template (myInstitutionComponent)
+
+ ```
+ app.component('prmSearchBarAfter', {
+ bindings: {parentCtrl: `<`},
+ template: ``
+ });
+ ```
+
+
+- Save and refresh your browser
+
+
+
+# JavaScript Recipe 2 - a Dynamic Directive
+- Use the `showDirectives` scriplet to identify the `prmSearchBarAfter` directive which you will plugin to
+- Run the following command in your browsers' console tab:
+```
+ angular.reloadWithDebugInfo()
+```
+- Focus on the `prmSearchBarAfter` directive
+
+
+
+- Run the following command in your browsers' console tab:
+```
+ angular.element($0).scope().$ctrl (angular.element($0).scope().ctrl in version earlier than February 2017)
+```
+
+- Review the properties of the directive to decide which data elements can be used, avoid methods/functions as they wont be backwards compatible
+
+
+
+
+- Edit primo-explore/custom/js/custom.js file and add: a component declaration for the `prmSearchBarAfter` directive, and a component declaration for the `myInstitutionComponent`
+
+- Add a binding definition the input parentCtrl for both components
+```
+ bindings: {parentCtrl: '<'},
+```
+- Add a controller definition for the `myInstitutionComponent` component:
+```
+ controller: 'MyInstitutionComponentController',
+```
+- Define a controller with 2 getter methods to return the query and selected scope
+```
+app.controller('MyInstitutionComponentController', [function () {
+ var vm = this;
+
+
+ vm.getSelectdScope = getSelectdScope;
+ vm.getQuery = getQuery;
+
+
+ function getSelectdScope() {
+ return vm.parentCtrl.scopeField;
+ }
+
+ function getQuery() {
+ return vm.parentCtrl.mainSearchField;
+ }
+ }]);
+
+```
+- Edit the `prmSearchBarAfter` directive template to reference the `myInstitutionComponent`
+```
+template: ``
+```
+- Edit the `myInstitutionComponent` directive template to reference the getter methods
+```
+template: `
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+
\n
\n \n \n This is a demo presenting the ability to display query\n information below the search box\n Query: {{$ctrl.getQuery()}}\n Scope: {{$ctrl.getSelectdScope()}}\n \n \n \n \n \n \n Action 1\n Action 2\n \n \n
+
+
+
+ This is a demo presenting the ability to display query
+ information below the search box
+ Query: {{$ctrl.getQuery()}}
+ Scope: {{$ctrl.getSelectdScope()}}
+
+
+
+
+
+
+ Action 1
+ Action 2
+
+
+