diff --git a/farmdata2/farmdata2_modules/fd2_barn_kit/fd2_barn_kit.module b/farmdata2/farmdata2_modules/fd2_barn_kit/fd2_barn_kit.module
index 634ca13b5f..4d49993f22 100644
--- a/farmdata2/farmdata2_modules/fd2_barn_kit/fd2_barn_kit.module
+++ b/farmdata2/farmdata2_modules/fd2_barn_kit/fd2_barn_kit.module
@@ -98,8 +98,21 @@ function fd2_barn_kit_preprocess_page() {
 
     // Define some useful variables in the JavaScript for page.
     // the @ symbol surpresses the warning when a user attempts to access a page without being logged in
+   
     global $user;
-    @$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."';";
+    
+    $account = user_load($user->uid);
+    // Map from roleID to role name
+    $roleMap = user_roles();
+    // Get the roles assigned to the user.
+    $roles = array();
+    foreach ($account->roles as $role => $roleName) {
+      $roles[] = $roleMap[$role];
+    }
+
+    @$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."'; ;";
     drupal_add_js($cmd,'inline');
+    $roleCMD = "var fd2Role = " . json_encode($roles) . ";"; // JSON encode roles array
+    drupal_add_js($roleCMD, 'inline');
   }
 };
diff --git a/farmdata2/farmdata2_modules/fd2_example/cypress/fd2vars.spec.js b/farmdata2/farmdata2_modules/fd2_example/cypress/fd2vars.spec.js
index 562a9c161c..6aa6a5f3a6 100644
--- a/farmdata2/farmdata2_modules/fd2_example/cypress/fd2vars.spec.js
+++ b/farmdata2/farmdata2_modules/fd2_example/cypress/fd2vars.spec.js
@@ -19,7 +19,10 @@ describe('Check the JS vars defined by the FD2 Examples module', () => {
 
     cy.visit('/farm/fd2-barn-kit')
     cy.window().its('fd2UserID').should('equal',1);
-    cy.window().its('fd2UserName').should('equal','admin');
+    cy.window().its('fd2UserName').should('equal', 'admin');
+    cy.window().its('fd2Role').then((variable) => {
+      expect(variable).to.deep.equal(["authenticated user", "Farm Manager", "Farm Worker", "Farm Viewer"])
+    });
   })
 
   it('Log in as manager1 and check tha vars exist.', () => {
@@ -27,7 +30,10 @@ describe('Check the JS vars defined by the FD2 Examples module', () => {
 
     cy.visit('/farm/fd2-barn-kit')
     cy.window().its('fd2UserID').should('equal',3);
-    cy.window().its('fd2UserName').should('equal','manager1');
+    cy.window().its('fd2UserName').should('equal', 'manager1');
+    cy.window().its('fd2Role').then((variable) => {
+      expect(variable).to.deep.equal(["authenticated user", "Farm Manager", "Farm Worker", "Farm Viewer"])
+    });
   })
 
   it('Log in as worker1 and check tha vars exist.', () => {
@@ -35,7 +41,10 @@ describe('Check the JS vars defined by the FD2 Examples module', () => {
 
     cy.visit('/farm/fd2-barn-kit')
     cy.window().its('fd2UserID').should('equal',5);
-    cy.window().its('fd2UserName').should('equal','worker1');
+    cy.window().its('fd2UserName').should('equal', 'worker1');
+    cy.window().its('fd2Role').then((variable) => {
+      expect(variable).to.deep.equal(["authenticated user",  "Farm Worker", "Farm Viewer"])
+    });
   })
 
   // Currently guest users cannot see any FD2 tabs so no check for them.
diff --git a/farmdata2/farmdata2_modules/fd2_example/fd2_example.module b/farmdata2/farmdata2_modules/fd2_example/fd2_example.module
index 6b080cfce8..de2040bf10 100644
--- a/farmdata2/farmdata2_modules/fd2_example/fd2_example.module
+++ b/farmdata2/farmdata2_modules/fd2_example/fd2_example.module
@@ -133,7 +133,22 @@ function fd2_example_preprocess_page() {
     // Define some useful variables in the JavaScript for page.
     // the @ symbol surpresses the warning when a user attempts to access a page without being logged in
     global $user;
-    @$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."';";
+
+
+   $account = user_load($user->uid);
+    // Map from roleID to role name
+    $roleMap = user_roles();
+    // Get the roles assigned to the user.
+    $roles = array();
+    foreach ($account->roles as $role => $roleName) {
+      $roles[] = $roleMap[$role];
+    }
+
+    @$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."'; ;";
     drupal_add_js($cmd,'inline');
+    $roleCMD = "var fd2Role = " . json_encode($roles) . ";"; // JSON encode roles array
+    drupal_add_js($roleCMD, 'inline');
+
+
   }
 };
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_example/maps/maps.html b/farmdata2/farmdata2_modules/fd2_example/maps/maps.html
index d145430598..7e6cf38523 100644
--- a/farmdata2/farmdata2_modules/fd2_example/maps/maps.html
+++ b/farmdata2/farmdata2_modules/fd2_example/maps/maps.html
@@ -1,37 +1,48 @@
 <!-- define a div to wrap around the app. -->
 <!-- apply v-cloak so that app is not visible until after being rendered -->
-<div id="maps" v-cloak> 
+<div id="maps" v-cloak>
 
-    <p>The farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js file provide a library of JavaScript convenience functions for accessing the FarmOS API.  This page gives examples of how to use these functions for loading maps from farmOS id numbers to textual names and vice versa (E.g. from user id to user name or crop id to crop name). The js library is include in the page by the fd2_example.info file.</p>
+    <p>The farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js file provide a library of JavaScript convenience
+        functions for accessing the FarmOS API. This page gives examples of how to use these functions for loading maps
+        from farmOS id numbers to textual names and vice versa (E.g. from user id to user name or crop id to crop name).
+        The js library is include in the page by the fd2_example.info file.</p>
+
+    <p>This page specifcially demonstrates the maps for going from user id to username and vice versa. The use of other
+        maps is similar. The documentation for the maps can be viewed by opening
+        farmdata2_modules/fd2_tabs/resources/doc/index.html from the repo in your browser. You can find the full source
+        for the library in farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js.</p>
 
-    <p>This page specifcially demonstrates the maps for going from user id to username and vice versa. The use of other maps is similar.  The documentation for the maps can be viewed by opening farmdata2_modules/fd2_tabs/resources/doc/index.html from the repo in your browser.  You can find the full source for the library in farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js.</p>
-        
     <p>Examples of how to use Cypress to test the elements on this page can be found in the maps.spec.js file.</p>
 
     <p>The userToIDMap map can be used to go from a username to a user id:</p>
     <UL>
         <LI>The logged in user is {{ userName }}.</LI>
-        <LI>That user's ID in the map is: 
+        <LI>That user's ID in the map is:
             <span data-cy="mapped-id">{{ userToIDMap.get(userName) }}</span>
     </UL>
 
     <p>The IDToUserMap map can be used to go from a user id to a username:</p>
     <UL>
         <LI>The logged in user id is {{ userID }}.</LI>
-        <LI>That user's name in the map is: 
+        <LI>That user's name in the map is:
             <!-- Need to convert userID to a string here because the map keys are strings -->
-            <span data-cy="mapped-name">{{ idToUserMap.get(userID.toString()) }}</span>
+            <span data-cy="mapped-name"> {{ idToUserMap.get(userID.toString()) }}</span>
     </UL>
 
     <p>The full list of users known to the sustem is:</p>
     <UL>
         <table border=1px>
-            <tr><th>User ID</th><th>User Name</th></tr>
+            <tr>
+                <th>User ID</th>
+                <th>User Name</th>
+            </tr>
             <!-- Use the computed property sortedIDs here to order the output -->
             <!-- Also bind the data-cy attribute into the v-for index -->
             <!-- That gives each element in the table a unique data-cy for testing. -->
             <tr v-for='(id,i) in sortedIDs'>
-                <td :data-cy=i+'id'>{{ id }}</td><td :data-cy=i+'name'>{{ idToUserMap.get(id) }}</td></tr>
+                <td :data-cy=i+'id'>{{ id }}</td>
+                <td :data-cy=i+'name'>{{ idToUserMap.get(id) }}</td>
+            </tr>
         </table>
     </UL>
 
@@ -50,51 +61,49 @@
 </div>
 
 <script>
-// Define the Vue instance for the app.
-new Vue({
-    el: '#maps',  // el: must match the id of the <div> for the app above.
-    data: {
-        // Provide easy access to the FarmDat2 variables in vue.
-        userID: fd2UserID,
-        userName: fd2UserName,
-
-        // Vue variables to hold the maps that are loaded from farmOS
-        // Note: Making a new map here prevents null reference exceptions if the
-        //       map has not been retrieved yet when the page is rendered.
-        userToIDMap: new Map(),
-        idToUserMap: new Map(),
-        createdCount: 0,  // used in created and pageLoaded
-    },
-    computed: {
-        sortedIDs() {
-            keys = Array.from(this.idToUserMap.keys());
-            keys.sort(function(a,b) { 
-                return Number(a) - Number(b);
-            })
-            return keys
+    // Define the Vue instance for the app.
+    new Vue({
+        el: '#maps',  // el: must match the id of the <div> for the app above.
+        data: {
+            // Provide easy access to the FarmDat2 variables in vue.
+            userID: fd2UserID,
+            userName: fd2UserName,
+            // Vue variables to hold the maps that are loaded from farmOS
+            // Note: Making a new map here prevents null reference exceptions if the
+            //       map has not been retrieved yet when the page is rendered.
+            userToIDMap: new Map(),
+            idToUserMap: new Map(),
+            createdCount: 0,  // used in created and pageLoaded
         },
-        pageLoaded() {
-            // Check here that the correct number of API calls have completed.
-            return this.createdCount == 2
+        computed: {
+            sortedIDs() {
+                keys = Array.from(this.idToUserMap.keys());
+                keys.sort(function (a, b) {
+                    return Number(a) - Number(b);
+                })
+                return keys
+            },
+            pageLoaded() {
+                // Check here that the correct number of API calls have completed.
+                return this.createdCount == 2
+            },
         },
-    },
-    created() {
-        // Use the FarmData2 library functions to load the maps into the 
-        // Vue variables when this page is created.
-        getUserToIDMap().then((response) => {
-            this.userToIDMap = response
-            // Increment this in the then() of each API call.
-            this.createdCount++
-        })
-        getIDToUserMap().then((response) => {
-            this.idToUserMap = response
-            // Increment this in the then() of each API call.
-            this.createdCount++
-        })
-    }
-})
+        created() {
+            // Use the FarmData2 library functions to load the maps into the 
+            // Vue variables when this page is created.
+            getUserToIDMap().then((response) => {
+                this.userToIDMap = response
+                // Increment this in the then() of each API call.
+                this.createdCount++
+            })
+            getIDToUserMap().then((response) => {
+                this.idToUserMap = response
+                // Increment this in the then() of each API call.
+                this.createdCount++
+            })
+        }
+    })
 
-//Allows Vue to be accessed in Dev Tools
-Vue.config.devtools = true;
-</script>
-    
\ No newline at end of file
+    //Allows Vue to be accessed in Dev Tools
+    Vue.config.devtools = true;
+</script>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_example/vars/vars.html b/farmdata2/farmdata2_modules/fd2_example/vars/vars.html
index 6f4cee5d22..53974ba05a 100644
--- a/farmdata2/farmdata2_modules/fd2_example/vars/vars.html
+++ b/farmdata2/farmdata2_modules/fd2_example/vars/vars.html
@@ -1,8 +1,9 @@
 <!-- define a div to wrap around the app. -->
 <!-- apply v-cloak so that app is not visible until after being rendered -->
-<div id="vars" v-cloak> 
+<div id="vars" v-cloak>
 
-    <p>FarmData2 defines a few useful variables in every page.  This page demonstrates how those variables can be brought into the Vue instance and used in scripts.</p>
+    <p>FarmData2 defines a few useful variables in every page. This page demonstrates how those variables can be brought
+        into the Vue instance and used in scripts.</p>
 
     <p>Examples of how to use Cypress to test the elements on this page can be found in the vars.spec.js file.</p>
 
@@ -10,6 +11,7 @@
     <UL>
         <LI>UserID: Contains the id number of the logged in user.</LI>
         <LI>UserName: Contains the text username of the logged in user.</LI>
+        <LI>UserRole: Contains roles of logged in user.</LI>
     </UL>
 
     <p>The current values of these variables are:</p>
@@ -19,10 +21,11 @@
         <!-- See fd2vars.spec.js for examples of testing these values. -->
         <LI>UserID: <span data-cy="user-id">{{ userID }}</span></LI>
         <LI>UserName: <span data-cy="user-name">{{ userName }}</span></LI>
+        <LI> UserRole: <span data-cy="user-role">{{userRole}}</span></LI>
     </UL>
     <p>The current values of the configuration variables are:</p>
     <UL>
-        <table class ="table table-bordered" style="width: 20em">
+        <table class="table table-bordered" style="width: 20em">
             <thead>
                 <tr>
                     <th>Configuration Variables</th>
@@ -53,41 +56,41 @@
 </div>
 
 <script>
-// Define the Vue instance for the app.
-new Vue({
-    el: '#vars',  // el: must match the id of the <div> for the app above.
-    data: {
-        // Provide easy access to the FarmDat2 variables in vue.
-        // Note: 
-        //   The JS variables fd2UserID and fd2UserName are defined in the 
-        //   fd2_example.module file.
-        //   They are also defined in the module files for the fd2_barn_kit and 
-        //   fd2_field_kit tabs so are available there as well. 
-        userID: fd2UserID,
-        userName: fd2UserName,
-        configObj: {},
-        createdCount: 0,  // used in created and pageLoaded
-    },
-    computed: {
-        keyArray() {
-            keys = Array.from(Object.keys(this.configObj));
-            return keys
+    // Define the Vue instance for the app.
+    new Vue({
+        el: '#vars',  // el: must match the id of the <div> for the app above.
+        data: {
+            // Provide easy access to the FarmDat2 variables in vue.
+            // Note: 
+            //   The JS variables fd2UserID and fd2UserName are defined in the 
+            //   fd2_example.module file.
+            //   They are also defined in the module files for the fd2_barn_kit and 
+            //   fd2_field_kit tabs so are available there as well. 
+            userID: fd2UserID,
+            userName: fd2UserName,
+            userRole: fd2Role,
+            configObj: {},
+            createdCount: 0,  // used in created and pageLoaded
         },
-        pageLoaded() {
-            // Check here that the correct number of API calls have completed.
-            return this.createdCount == 1
+        computed: {
+            keyArray() {
+                keys = Array.from(Object.keys(this.configObj));
+                return keys
+            },
+            pageLoaded() {
+                // Check here that the correct number of API calls have completed.
+                return this.createdCount == 1
+            },
         },
-    },
-    created() {
-        getConfiguration().then((response) => {
-            this.configObj = response.data
-            // Increment this in the then() of each API call.
-            this.createdCount++
-        })
-    }
-})
+        created() {
+            getConfiguration().then((response) => {
+                this.configObj = response.data
+                // Increment this in the then() of each API call.
+                this.createdCount++
+            })
+        }
+    })
 
-//Allows Vue to be accessed in Dev Tools
-Vue.config.devtools = true;
-</script>
-    
\ No newline at end of file
+    //Allows Vue to be accessed in Dev Tools
+    Vue.config.devtools = true;
+</script>
\ No newline at end of file