Archives for App Development

Creating a Better Experience for the Provider and the Patient

Join Avtex for a hands-on look at our comprehensive behavioral healthcare management tool, Diagnostic Evaluation Center (DEC). DEC provides a uniform process for documentation in an easy modernized way, which will reduce liability, increase efficiency, reduce cost, and enhance patient safety. Our demonstration will show you how DEC advances care coordination capabilities, leading to a better provider and patient experience.
Read More

Creating a Bootstrap Carousel in SharePoint

So you have a Bootstrapped SharePoint site. Everything’s great — until you want to add an image carousel. The default SharePoint image carousel looks like SharePoint, not Bootstrap, and is pretty bare bones. Sure, you could put together a custom Content by Search display template. But that’s a lot of messing with the SharePoint API. Here’s how to do it using a Content Query Web Part and some custom XSLT. This example assumes you already have Bootstrap added to your site, and that your Bootstrap build includes the Carousel functionality. Create a Picture Library Go to Site Contents, choose “Add
Read More

Generate and download an iCal event in SharePoint

Here’s a quick way to automatically generate downloadable iCal files for SharePoint events, where the events are managed in a custom list, and displayed using a Content Query Web Part and a custom XSL template. For starters, reference my general post on using XSLT to customize CQWP output. In this example, I’m just going to lay out a few basic parameters, rather than displaying an entire template. THE LIST Make sure each event has the following columns: Title: Single line  of text Description: Multiple lines of text Location: Single line of text StartTime: Date/time field EndTime: Date/time field THE CQWP Set the custom
Read More

SharePoint 2013: Generate dynamic content using XSLT and a comma-delimited string

In SharePoint, the Content Query Web Part uses XSLT templates to display the results of each query. This is normally a fairly straightforward process (for XSLT). For an example, see the “Promo boxes” demo I wrote a while back. There’s one area, though, where SharePoint lists and XSLT collide: Checkbox columns. If you have a column in SharePoint that allows multiple choices, when you grab that column data in XSLT, SharePoint sends the data in a string that looks like this: ;#Choice1;#Choice2;#Choice3;# Just to display that in a human-friendly way, you would have to run it through the translate function
Read More

Bootstrap radio buttons and checkboxes in columns, with contextual text fields

We recently did a project with the following requirements: Touch-friendly interface (translation: big touch targets); Bootstrap; Radio and checkboxes need to highlight when selected; When a radio button or checkbox is selected, sometimes a little additional information is required. See the demo to get a clear idea of what I’m talking about. To accomplish this, we did several things: Used Bootstrap “radio-inline” and “checkbox-inline” classes; Wrapped each radio/checkbox in a label, styled the label to look like a touch target, and set it so clicking on the label selected the radio/checkbox. Created a “column” class to make the labels form
Read More

Drag and drop sorting of table rows in priority order

A common design pattern is making choices from a list, and then adding those choices to a table of results. Often the table will use some sort of Javascript plugin — Footables, Datatables, etc. — to provide sorting and searching functionality. But what if you want the results in a table, and the only extra you need is a quick way to sort the table into a prioritized list? And you want to do it using a touch-friendly drag/drop interface? Here’s a simple way to do that, using jQuery and jQuery UI. Check out the demo to see it in
Read More

Clickable labels that highlight when selected

I’ve been designing a touch-friendly form for one of our clients. One thing we wanted to do was make checkboxes and radio buttons easier to tap, and clearly show what has been selected. A little bit of CSS and JavaScript did the trick. Check out the demo to see it in action. This example uses Bootstrap classes, so you can drop these snippets straight into your own Bootstrap-based site and it should work just fine. HTML     <form id="testForm" class="form-horizontal" method="post">     <div class="form-group">       <div class="col-md-4">         <label class="radio" for="option-0">           <input name="options" id="option-0" value="1" type="radio">           Option #1
Read More

SharePoint and protocol-relative URLs

The Google Hosted Libraries are awesome — very fast CDNs that serve common development libraries like jQuery at blaziing speed. And upgrading to the newest version of a library is as simple as changing a URL. You can use the Google libraries in SharePoint, but SharePoint Designer has a quirk that will trip you up if you’re  not careful. Google’s suggested link looks like this: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Note that there’s no “http”  or “https” in the “src” line.  THis is known as a protocol-relative URL. In modern browsers, it will serve “http” content to http requests, and “https” content to
Read More

Geolocation in WordPress

The explosion of geolocation services has made it relatively easy to do custom geolocation of just about any dataset you want. In this post, I’ll walk through setting up a “Location” custom-post type in WordPress. We’ll calculate a latitude and longitude for each location, include a search function, and then display the resulting locations in a table and on a map. Create latitude/longitude database table We want the location data to be searchable, so we can show people the closest locations. In order to avoid WordPress’s complex metadata relationships and simplify the MYSQL calls, I want to put my latitude/longitude
Read More

jQuery in edit mode in SharePoint 2013

On a project I’m currently working on, we’re using the Bootstrap 3 Sharepoint implementation. The implementation went pretty smoothly out of the box, but we’ve added some custom jQuery to ease the process. Everything worked fine, except none of our jQuery was applying when a page was in Edit Mode. We were getting the dreaded “TypeError” message, which usually means we’re trying to use jQuery before the jQuery library has loaded. But as best we could tell, the library was loading, and in the proper order. Finally we tracked down the problem, thanks to a post from Eric Franz. It
Read More