WYSIWYG Contact Directory

This is an advanced customization described in our blog post here: Customization Options in Skybuilder

As you will discover, the WYSIWYG modules in Skybuilder are very versatile and offer a wealth of possibilities for customizing your apps. Creating a Contact Directory (such as those needed for in-house private apps, sales teams, MLM organizations, etc.) is one use that, with a little planning and attention to detail, can add value and usability to your app.

Caveat: Even though the module is WYSIWYG (what you see is what you get), you need to know a little HTML to create advanced uses, or at least know where to go to get the answers. Here are a few links that will help you get started:

CSS Tricks – this will teach you how to add links to open phone, SMS and email links.
HTML Tables – this will teach you how to create tables in HTML. When you browse around that site you’ll find a wealth of information on how to use HTML.
JavaScript – A good tutorial on using JavaScript.

So, here’s how our client created an awesome contact directory. Screen Shot 2016-04-17 at 5.26.10 PM

  1. He created a table listing all of the employees with their contact information…how they could be reached by personal phone, text, email and at their office.The HTML consisted of building tables and inserting clickable links for each contact method.AS you will see by the image on the right, the HTML was coded to provide different Click functions for first name, last name, phone image and SMS image.
  2.  After the table was completed, our tech support team provided him with a simple javascript code to make his list searchable. He simply copied/pasted the following code into his WYSIWYG module which added the Search Field at the top of the list:

<input type=”text” id=”search-input” style=”width: 100%;” placeholder=”Search” value=”Search”>
<script type=”text/javascript”>// <![CDATA[
$(function() {
$(‘#search-input’).focus(function() {
if ($(this).val() == ‘Search’)
$(this).val(”);
});

$(‘#search-input’).blur(function() {
if($(this).val() == ”)
$(this).val(‘Search’);
});

});
$.extend($.expr[‘:’], {
‘containsi’: function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || ”).toLowerCase()
.indexOf((match[3] || “”).toLowerCase()) >= 0;
}
});
$(“#search-input”).on(“keyup”, function(e){
var search = $(“#search-input”).val().replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
$(“#search-input”).val(search);
$(“tr”).hide();
$(“tr:containsi(‘”+search+”‘)”).show();
});
// ]]></script>

Will it work for you?

It could. This is one of those applications you will need to test to see if it will work for you. As stated earlier, it requires a little knowledge of HTML, CSS and JavaScript.

We’ve tested it on the following themes: SBInvision, Elixir, ColdChillin, Diamond, Square, and Mello; however, it was not optimized for the newer themes which would require a different implementation. Also, you will need to test on various devices to make sure it works consistently overall.