Keys to a Pro Code environment

[AJ Siegel]

I am half way through month 4 of my career at ServiceNow and continuously making progress on my understanding of the platform. Having spent most of career building custom websites in text editors and other offline tools, it was an initial adjustment writing code in the browser. In fact, for the level of customization that my team is doing, I desperately needed to find a way to go back to my roots and building using popular web dev tools.

My development needs:

• SASS - my team is transitioning to writing all of our CSS using SASS with all the joys of mixins, variables and nesting that come with it.
  • This brings up issues with collaboration. How do we share the source SASS so the CSS stays up to date?
• HTML5 + Bootstrap 3 - we do a lot of bootstrap based responsive sites and I want the ease of autocomplete
• AngularJS - With Geneva's move away from Jelly and embrace of AngularjS, I need quick access to all the tools that make AngularJS development faster

My initial work environment:

• Sublime Text 3 - my current preferred code editor, with great plugins for autocomplete for most of the languages and frameworks I am using
• CodeKit - A more visual approach to build task management a la gruntjs. Codekit does compilation of my SASS, minification of my js, and quick access to bower components
• john.andersen Sublime Text plugin that allows me to post changes to any page, script, style sheet to the instance via ServiceNow's REST API.

This solution worked very well for my first few projects in that I was able to just grab the existing record from the instance, paste into a new Sublime file and rock out. One of my favorite feature's of John's plugin work is the conflict detection. If someone changes a file you are working on, you are alerted to it as soon as to try and save changes. At this time there is no diff feature, but you can choose to override those changes or figure out the conflicts on your own.

My biggest challenge though came when my team started collaborating more on the CSS. Since the CSS stored on the instance is compiled from SASS, if someone just went and changed the CSS, we'd quickly get out of sync.

1. Person A writes SASS and uploads compiled CSS to the instance
2. Person B logs into the instance and modifies the CSS new styles or changes existing properties
3. Person A makes more changes in their SASS, recompiles the CSS and uploads it to the instance

In this scenario, all the hard work that Person B did is now gone!

So how do we solve this???? Filesync to the rescue!

Thanks to our good friends at Fruition Partners and the hardwork by daniel.pettet from the ServiceNow TC team in Germany, this great little Mac/Windows tools syncs local files with their respective fields on your instance.

For example, a UI page has three fields; HTML, Client Script, and Processing Script. Filesync allows you to pull all these down into 3 distinct files (1 HTML and 2 JS).

Also, by creating a separate SASS table on your instance, you can store the SASS as a separate record to ensure others can pull down the SASS.

{
       "roots": {
               "/Users/aj.siegel/sites/fs-cod": {
                       "host": "***.service-now.com",
                       "protocol": "https",
                       "preLoadList": {
                               "scss" :[
                               "donDraper.scss"]
                       },
                       "auth": "***"
               }
       },
       "search": {
               "don-files": {
                       "query": "nameLIKEdon",
                       "records_per_search": "100",
                       "download": true
               }
       },
       "preLoad": true,
       "createAllFolders": true,
       "ignoreDefaultFolders": true,
       "debug": true,
       "folders": {
               "scss" : {
                       "table" : "u_content_scss",
                       "key" : "u_name",
                       "fields" : {
                               "scss" : "u_style"
                       },
                       "_custom": true
               },
               "style_sheets": {
                       "table": "content_css",
                       "key": "name",
                       "fields": {
                               "css": "style"
                       },
                       "_custom": true
               },
               "ui_macros": {
                       "table": "sys_ui_macro",
                       "key": "name",
                       "fields": {
                               "xhtml": "xml"
                       },
                       "_custom": true
               },
               "ui_pages": {
                       "table": "sys_ui_page",
                       "key": "name",
                       "fields": {
                               "xhtml": "html"
                       },
                       "_custom": true
               },
               "ui_scripts": {
                       "table": "sys_ui_script",
                       "key": "name",
                       "fields": {
                               "js": "script"
                       },
                       "_custom": true
               }
       }
}

I am not going to spend time explaining what all these key-value pairs mean, as Dan does a phenomenal job in his Readme

What I want to quickly highlight are some of the customizations that I've made:

SASS as a separate table

I created a new table on my instance called u_content_scss and added two fields to it; u_name and u_style. In my config I added this line

 "scss" : {
                       "table" : "u_content_scss",
                       "key" : "u_name",
                       "fields" : {
                               "scss" : "u_style"
                       },
                       "_custom": true
               }

That tells filessync to watch the scss folder for changes to any file ending in scss and upload those changes to the u_style field of the u_content_scss table

Quick Pull files for an App

A lot of the project our team works on are as Scoped Apps so by creating search that looks for that

"search": {
               "madman-files": {
                       "query": "sys_scope=SYSID",
                       "records_per_search": "100",
                       "download": true
               }
       }

Then when I run the app with --search madman-files, it pulls all records that match the sys_scope=SYSID query.

And two more goodies courtesy of my teammate ben.hollifield

Grab all the latest files for a project and start the watcher

Create a new *.command file

#!/bin/sh
cd "`dirname "$0"`"
echo "Initializing files and starting FileSync..."
./node-darwin src/app --config ebcgenevademo.config.json --search madman-files
./node-darwin src/app --config ebcgenevademo.config.json

Refresh all the files to grab any updates

Create a new *.command file

#!/bin/sh
cd "`dirname "$0"`"
echo "Reloading files"
./node-darwin src/app --config ebcgenevademo.config.json --search madman-files

There is so much power on the ServiceNow platform and developing in the browser will continue to improve with some upcoming enhancements. For now, given the speed our team needs to operate, this allows us to improve build speed and collaboration.