Everyone loves a good drag-n-drop. ServiceNow comes baked with a concept within layouts on pages called drop zones. The idea is that you can define an area on a page where new content can be added and then visually move that content around. Wish a certain block was above another? Not an issue, just edit the page and click-drag-move the block to the upper position within that drop zone.
Pretty cool.
It’s best to utilize drop zones for content that you want to be unique to each page. For instance, a footer is not an ideal candidate to be added to a drop zone area. The reason is that you have to physically add it to each page. As an alternative I would include the footer within the actual layout. When someone loads the page to edit it, they will see the footer but can’t edit it or move it.
Within your layout, you just have to define your drop zone areas. You can copy and paste the code below for a new layout and then modify as you see fit:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> | |
| <!–The following variable and IF statement allow you to have a custom layout when placing blocks during the edit page process –> | |
| <g:set_if var="jvar_dialog" test="${!RP.isDialog()}" true="false" false="true" /> | |
| <j:if test="${jvar_dialog=='false'}"> | |
| <!– including the id="${jvar_name} is the only really critical piece to what is below. It allows the layout to work. –> | |
| <div id="${jvar_name}"> | |
| <div class="container"> | |
| <div class="header"> | |
| <div id="dropzone5" dropzone="true" class="row"></div> | |
| </div> | |
| <div class="content"> | |
| <div width="col-lg-3"> | |
| <div id="dropzone10" dropzone="true"></div> | |
| </div> | |
| <div width="col-lg-6"> | |
| <div id="dropzone20" dropzone="true"></div> | |
| </div> | |
| <div width="col-lg-3"> | |
| <div id="dropzone30" dropzone="true"></div> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <div id="dropzone50" dropzone="true" class="row"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </j:if> | |
| <!– If the page is being displayed within a dialog, typically when adding content to it, display the table based version. | |
| You'll notice the naming of the drop zones corresponds with the declarations above.–> | |
| <j:if test="${jvar_dialog=='true'}"> | |
| <div id="${jvar_name}"> | |
| <table width="90%"> | |
| <tr><td colspan="3">Place Your Header Content Below:</td></tr> | |
| <tr><td id="dropzone5" dropzone="true" colspan="3"></td></tr> | |
| <tr><td colspan="3">Place Your Content in the Appropriate Drop Zone Below:</td></tr> | |
| <tr><td id="dropzone10" dropzone="true" width="25%"></td> | |
| <td id="dropzone20" dropzone="true" width="50%"></td> | |
| <td id="dropzone30" dropzone="true" width="50%"></td> | |
| </tr> | |
| <tr><td colspan="3">Place Your Footer Content Below:</td></tr> | |
| <tr><td id="dropzone50" dropzone="true" colspan="3"></td></tr> | |
| </table> | |
| </div> | |
| </j:if> | |
| </j:jelly> |
Now with that layout in place, you can create a new page with that layout assigned, plug in your theme, add your content and you’re ready to have some drop zone fun.
Any questions? Feel free to let me know below.
