Archive for category code

Batchbook forms – required fields

Problem 1: making fields required.

This is a simple problem at the top of a more complex issue. In standard HTML there is no such thing as a ‘flag’ value which can be added to fields in a form indicating whether they are required or not, but there are two methods available to go around the problem: server side and client side solutions.

In the old days you had two options: the form was submitted to the server. Then a cgi script validated the data and returned it to the browser with cryptic error messages like ‘something is missing’.

The alternative was to submit the page to itself (pseudo- client side): some javascript was handling the processing of the form and allowed to highlight the missing fields before you could submit it. This is certainly an improvement in the user interface and a quite solid and reliable one, but there was no way for the user to notice whether something was incorrectly entered until the form was submitted.

Neither of the above is possible in the case of Batchbook forms as I obviously don’t have access to the server-side script which handles the forms, nor I wanted to have custom-made function to validate the forms as it is too cumbersome to maintain!

In the meantime user interface developers have been crunching numbers in the background in the past few years and wonderful libraries and APIs have been developed making the magic happen on the client side in very clever ways: jquery and mooTools are probably the most well-known libraries.
Even if you don’t fully understand how they work (and I’m one of who is only tinkering with the libraries and plugins!), it is not too difficult to adapt things to fit the purpose of what is needed.

That is exactly what I have done: I borrowed a plugin for jquery and modified the code of the form to ‘validate’ on the client side. The key adavantage of using a library is that a lot more becomes available on the client side and unlike the early days of javascript in which people were concerned that the browsers were not able to handle it, these days it seems that only 1% of users actively deactivate javascript.

The choice for me was jquery (this is already available in wordpress), with the jquery.ui library and an inline validation engine plugin developed by Cedric Dugas. The latter is doing all the hard work!

The first thing was to figure out which fields were deemed ‘required’. In my case the name, lastname and email were the core fields to start with.
After including the libraries and the css in the head of the document:



    



I then customised a little the validation function:

		$(document).ready(function() {
			$("#publicForm").validationEngine()
			//$.validationEngine.loadValidation("#date")
			//alert($("#formID").validationEngine({returnIsValid:true}))
			//$.validationEngine.buildPrompt("#date","This is an example","error")	 		 // Exterior prompt build example
			//$.validationEngine.closePrompt(".formError",true) 							// CLOSE ALL OPEN PROMPTS
		});
		
		// JUST AN EXAMPLE OF CUSTOM VALIDATI0N FUNCTIONS : funcCall[validate2fields]
		function validate2fields(){
			if($("#contact_details[first_name]").val() =="" ||  $("#contact_details[last_name]").val() == ""){
				return false;
			}else{
				return true;
			}
		}

The final touch was to add the class to trigger the verification of the fields when the user moves on to the next field. The immediate popup alerts the user immediately saving them the submit and recheck type of interaction we have talked about earlier. In my example this is what I have done:


Repeat the same with the other fields as required (check the instructions on Cedric’s website for more details) including checkboxes:

Student Teacher/Staff

And that’s all folks! You can look at the other installment of this batchbook forms tutorial:
- big dropdown menus & custom dates
- hidden fields
- help tooltips

And as usual leave comments/notes if it was useful!

Tags: , , ,

Batchbook & web forms

In the past few weeks, as part of a project with a new startup company, we entered a trial to use batchbook, ‘your social crm’.  Based on my previous post about CRMs, this was a no brainer to pick.

  • The model is completely different from any other CRM currently available: the tag system and the social aspect makes it way better that clunky customizable models in which you need to spend a long time to understand the system before you can actually figure out if you need anything else. By that time you are so entangled in the system architecture that you forgot what you needed a CRM for in the first place…
  • Tags add another dimension to the data stored and allow for a very flexible and powerful way to interrogate data
  • Cost is reasonable for a small number of users, but doesn’t exponentially multiply by adding an extra user like other system impose
  • It comes with an interesting array of integrations and linkages with other innovative business oriented products out of the box (hence no need for further customization subject to break down whenever something is changed or updated)
  • Even if it is not open source, there is a reasonably well explained API and the people working there seem very responsive!

Now, the system does what we need, but it is not perfect! One of the things that made me scream was the option to create web forms.

Basically, you create a super-tag with tags (in a simplistic way a set of fields associated with a record), then you create a form by selecting the field (=tags) and the form is ready to go.

Great in principle and incredibly easy to make, but there are a couple of critical caveats: 1) How do you make fields required? 2) How do you hide certain fields? (i.e. you might want to use data from somewhere else) 3) how do you customise huge dropdown lists (i.e. nations/languages etc) without having to manually edit all the options in the crm?

At first i was appalled: did the people at BatchBlue actually think through what people want to use forms for?

Then I started to look around, came across a nice post by Adam Darowsky on styling forms and suddenly had one of those lightbulb moments. Here I’d like to share what I have done and welcome comments and feedback. I will not delay further the details as the post above does a good job in explaining what’s in the form.

A couple of notes first. Once you create a web form from the Batchbook interface you are given the direct link to the form, which is something like this

https://yoursite.batchbook.com/lists/form/xxxx

The first step is to get the source code of this form and understand what it does. The header is pretty straightforward. There are two CSS stylesheets attached with variations for old browsers and a javascript calendar which handles the popup for dates (and i’ll talk about it later)

Batchbook | Contact Entry Form




A useful thing to know is that it might be better to just download the batchbook css if you like the style as the url could change (and it did at some point for me, therefore I decided to link it to a local copy on my server.
Then, there are a couple of important things to look at: 1) where the form is going to and the overall structure of the form (if re-use the same stuff).
The default action is to send the form to the script residing on the batchbook server (at the top). However, if you host the form file on your own site you will need to change the action (at the bottom)

 
...
....

The next bit to look at is at the very bottom of the form and it is essential as it contains two hidden fields without which the form submission will fail. The first one contains is essential as it is the identifier of the list (i.e. where the data goes in the crm). In this example I changed it with XXXX, but you can see your number from the url. Just leave the second as it is before the send button.

            

With this basic understanding the rest follows on and this is how I created workarounds for the problem:

- required fields
- big dropdown menus & custom dates
- hidden fields
- help tooltips

A very first design choice for me was to keep the pages containing the form isolated (i.e. not embedded in standard wordpress posts/pages. This was for two reasons:
1) it is much easier to modularise the forms without interefering with the wordpress theme
2) effectively I could re-use the forms independently by the fact that the site is based on wordpress or another CMS

I very much welcome suggestions and comments for improvements!

Tags: , , ,

Games in 48 hours

Last year I came across the 24-hours film making challenge and was quite excited about this idea which is pushing to the edge the creative passion of young cinema students.

Yesterday I came across this challenge. Sid Meier was involved and this mini-documentary makes it an interesting show.

Tags: , ,

Sociality of the web

I was unsure if the title ’4 geeks and a pot of money’ was going to be too critical for this post, but I cannot deny that I thought about it!

I came across this article in the NY Times and ended up with a number of odd thoughts:

1- how did 4 geeks (i guess it is better than nerds?) with an idea managed to pull together over $150.000?

2- this is the revenge of the common-man

3- knowledge is power (and knowing how to code is the new scholastica, relegating the real common man to the ignorant and powerless man of the middle age)

4- is it going to work? (or is it just another open source project destined for failure?)

Let’s go with order. The first thought is easily addressed: theirs is a ‘call to arms’ against Facebook and it is not surprising at all that they received such support. It was not long ago that Zuckenberg made changes to Facebook which resulted in a user revolution. Just to get a grasp of the conflict it is worth to look at his online biographies on the Wikipedia and Dickipedia .

Personally, I’m not sure about all this fuss regarding privacy and the tyrannical ruling of corporations. But this might be down to the fact that my use of social networks is not so extensive. I’m actually quite bad in keeping in touch with the phone already…

However, I also double checked what’s public of my profile after the latest changes with open graph (see what facebook publishes about you and your friends with this openGraph app.

The fact is that when I participate into any public activity my identity is exposed in one way or another and snapshots of me are going to be all over the place, with or without consent. Therefore what’s the problem? The fact that the information is becoming more and more aggregated I believe is a side effect of the internet. However my view is that the information is out there anyway.

Let’s use a simple example. In public I’m a teacher in a higher education institution, I’m a football referee and member of a number of clubs and organizations. Each holds an information silo about me which is semi-public (i.e. they might keep this private officially). Nevertheless, because of the type of activities, my face could also be published in some form which i might not have necessarily agreed when i became a member (i.e. a journalist taking a picture and publishing in a newspaper showing me in a cup final, or academic references in places which i didn’t think i would be associated with).

The concern, however goes deeper I believe: for those who are used to public scrutiny, there is a certain awarenss of a thin line between public and private and even though manifestation of identity varies in different domains I can’t avoid to think that people’s privacy is a facade for paranoia.

There is a voyerism these days that leads to a worldwide exposure similar to celebrities. Is this a crave for attention channeled to the world? My question is not only why would I want to share a picture in which I make a fool of myself during a night out, but why would I want to take the picture in the first place? Flipping the coin, why would I want to take a potentially embarassing snapshot of a friend who will most probably regret the moment anyway? Anyway, going off topic now… There is an argument for ease of use though and I like the idea of data portability (the Gigya login on this site tells you only half of the story?!)

The second thought is more optimistic: this shows that anyone with a good idea has a chance of succeding. This is a great ideal and I fully embrace it. Revisiting the last though, however, it is quite unlikely that without the exposure, this project would have had any chance of getting out of the cafe in which it was conceived.

The third thought is a reflection on the true value of the definition of common man. These kids are actually not so common. They are bright individuals in pursue of an idea, but they are equipped with knowledge to pursue the goal. It is actually foolish to think that anyone could do it. In fact, most people, no matter how you present web 2.0 stuff, are still mere users. For example, although it was fashionable a few years back to keep a blog count (see for example Duncan’s post on the blog herald), how many are actually active? My view is that things are very much dynamic, but a lot of people out there don’t blog, but read blogs, don’t tweet or bordcast themselves on youtube, yet they like that others do. A fundamental obstacle might be they don’t want to, they don’t need to, but also because they have no clue how to do it. So knowledge is power (yet again), and ignorant users who can’t even change their privacy setting in facebook, will most definitely not try to host their own node. What are the actual consequences of this model? how private can it really be? The distributed networks of napster, emule or bittorrent didn’t seem to be working, especially when your network provider might be responsible for your traffic (this seems how many countries are producing laws in this sense). So what’s the real difference of having this information stored on the facebook servers or on my home node?

Well, a lot of questions to be asked, but I am a supporter of open source projects, and although I have no clue if this is going to work, for now I will be following the Diaspora project and look forward to see how these guys are doing.

However, I share Jeff Sayre’s views about the usefulness of more streams and reccomend his detailed article on social-networking.

Tags: , ,