One of the amazing features of Service Portal is how it encapsulates each widget into a self-contained component. This encapsulation greatly increases the maintainability and reduces code complexity by breaking the portal or application down into many smaller units of functionality (widgets). However, if you start using jQuery or performing DOM manipulation directly within the controller, you can quickly cause problems in your application. Officially, this is not a good practice. According to the AngularJS Documentation: Do not use controllers to manipulate the DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation. The Link Function to the rescue! In AngularJS, DOM manipulation is typically only performed inside of the Link Function of a Directive, and in Service Portal, this is available via the "Link Function" field of the widget. By using the "element" object, you get access to the DOM of the widget. Consider the following example: Here is another quick example calling a jQuery Plugin If you're using jQuery plugins, you may wish to create a custom directive to make it reusable across multiple widgets. By using the Link Function and "element" object, you're staying within the confines of the current widget, and won't accidentally impact other widgets or elements on the page. Further reading: jQuery Plugins as Angular Directives DOM Manipulation in AngularJS Creating a Directive that Manipulates the DOM DOM Manipulation the AngularJS way
Every great portal begins with a well thought through plan. The planning stage is critical to gaining alignment on key functionality as well as gathering insight into what actual users are looking for. Here are a few tips we use to get started the right way. “By failing to prepare, you are preparing to fail.” -Benjamin Franklin Step 1 - Clarify your requirements early on Why? Because changes on paper are the easiest to make. Benefits of requirements gathering: Gets your whole team involved from the beginning Documents the scale of the project Easier to tackle potential roadblocks early in the project Things to consider while gathering requirements: How will you gather insights from actual users to help define your goals? Will you need to upgrade your instance to the latest version of ServiceNow? Will you add other departments to your portal? Do you have the infrastructure in place to handle enhancements? (Ex: live chat) How many people will access the portal on tablets and mobile devices? Step 2 - Make your goals about fulfilling needs Why? Because good goals inspire change. Benefits of setting goals: Shifts focus from problems to needs Motivates the whole team to work towards the same results Aligns stakeholders and reduces the amount of subjective feedback later in the project Bad Goal Example Good Goal Example “Our IT department is overwhelmed with calls so we need to get higher adoption of the portal.” “Most of our users cannot work without the items they have requested. Instead of users calling the IT help desk for the status of their request, we need to speed up the process by making it easy to check statuses on the homepage of the portal” “The computers are hard to find on the portal. Make it easier to find computers” “Users are having a hard time understanding how to order a computer so we need to create a step-by-step flow from the homepage that makes it very clear where to begin and how many steps there are to complete an order.” Step 3 - Build empathy with your users through research Why? Because otherwise you are just guessing. Benefits of user research: Reveals patterns and unknown insights Defines objectives and tests hypotheses Exposes alternatives and informs conclusions Research Type Description User Interviews Produces qualitative data Gets into the minds of actual users to understand what drives their specific actions Can take place remotely via phone or web-based video, or in person Focus Groups Allows for multiple perspectives to be heard regarding the same topics Can take place remotely via phone or web-based video, or in person Surveys Inexpensive method you can use to gain insight quickly Can be sent to a large pool of users to gain quantitative information Caution: Don’t ask the wrong questions. When doing research, be careful of asking the wrong questions. People don’t always know what they want if it doesn’t exist yet. If all of your user questions require someone to imagine what could make the experience better, they typically will not know how to respond. Step 4 - Make it visual, but keep it simple Why? Blockframes and wireframes make design changes more efficient Benefits of Blockframes and Wireframes: Lowers the bar of design so everyone can participate Removes subjectivity so you can focus on the flow and hierarchy Encourages collaboration and easy iteration Blockframe A blockframe is a simplified representation of a portal that consists of large colored blocks that represent content areas. Quick and easy way to flesh out your vision without getting caught up in the details Can serve as an extension of your requirements gathering phase as a visual checklist Wireframe A wireframe is a low-fidelity visual representation (typically done in grayscale ) of a portal’s layout, sometimes referred to as a skeleton, or a blueprint. Represents the basic page layout and navigational scheme Shows more detail than a blockframe Can also be easily modified and changed
The team at NewRocket recently collaborated with the University of Cincinnati, Lindner College of Business on their service portal. The portal features a rich, engaging design along with some unique customizations. The portal targets students, faculty and staff each with their own specific requirements. The use of simple icons and department based filtering creates an easy to use system for ordering and reading articles. The portal has been well received by both the students and administrators. Check out this video created by the University of Cincinnati, Lindner College of Business IT Team Custom Icons Featured Widgets Responsive Layout Branded Login Screen
While developing web layouts, at some point you've probably run into the issue with the footer floating in the middle of the page just below the content. This can easily be fixed with a little CSS magic. Service Portal does support fixed headers and footers, but this causes the footer to stick to the browser window and overlap the content, which is not what we want. We want the footer to always be at the bottom of the page. This is called a "sticky footer". In between Helsinki and Istanbul some major changes were to made to the outer page structure that broke some earlier solutions posted on the community. My goal is to provide a solution that would work with all versions of Service Portal and it's various supported browsers. The Solution: I've chosen to implement the sticky footer using Flexbox as this provides the most amount of flexibility. One added advantage of flexbox is that it also supports variable height footers, which many other solutions do not. Installation: Go to your portals theme record. Select a footer widget, you can use the out-of-box "Sample Footer" as a test. Make sure the "Fixed footer" checkbox is unchecked. Paste the following snippet of CSS into the "CSS variables" textarea, or alternatively you can include it in a CSS Include. [crayon-5ada30af6ab30473927987/] It's been tested on Helsinki, Istanbul, and Jakarta using Chrome, Safari 9+, IE10+. For additional information on flexbox, you can check out the following resources: A quick guide to flexbox by CSS-Tricks - here. Solved by Flexbox, a website dedicated to cool flexbox techniques - here. I hope you've picked up something new and useful from this article. Would love to hear your comments and questions in the comment section below.
Wondering how to get your service portal to align with your branding guidelines? With the right approach, you can quickly and consistently customize your portal to match the rest of your branding. In this session, you'll learn how to build a custom theme by correctly applying styles at the widget, page, and theme level and utilize all of the potential of this powerful platform. Register for the CreatorCon Breakout: https://knowledge.servicenowevents.com/connect/sessionDetail.ww?SESSION_ID=4221
To help contribute back to the community, we’re going to try to develop and give away one new widget per month. For January we have developed the “Related List” widget, which allows you to display related lists on the form page in Service Portal. Example below from a service catalog request: Please let us know what you think in the comments below or by tweeting at us at: @newrocketinc
We’re working on some ideas for Service Portal related talks at Knowledge17. We have some good ideas for topics, but would love to hear from you: What are some topics or questions that you would love to see presented at K17? Here are some of the ideas we came up with: Developing custom apps in Service Portal Creating a custom theme Facilitate a great portal user experience Integrating your portal with an external service Creating a single portal serving multiple business units Advanced widget creation with Angular.js What are we missing? Please send us some of your ideas. We would love to hear from you. To submit your ideas, leave a comment below or email us at: email@example.com