Blogger & Zoho Creator Tutorials, Tips & Tricks

Zoho Creator Tutorial - Remove Special Characters from String (Validation)

2009-11-26T15:45:00.015+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms | Unique values in List | HTML views |

We all know that Telephone / Zip codes are NUMBERS isnt it (Genius eh!). But, when we typically use the Number-field type in the Zoho form, the end user tends to enter something like this

But, as the Form Field is of Number type, the system fails to recognize the special characters ( parenthesis (), - hyphen etc) and understands the value to be Null
ie, According to the system, an number field which does not exclusively contain numerals are invalid -- Well, thats how its supposed to be isnt it?. okay, the what happens with INVALID DATA ? .. ofcourse it gets rejected ( Again, a No Brainer.. isnt it?)

Well then, how to make sure irrespective of whatever format the user enters, the data gets added on to the system in the right format? For this, we can use a combination of field types & Custom Actions.

SCENARIO :- ALLOW USER TO ENTER THE TELEPHONE NUMBER IN WHATEVER FORMAT HE WISHES TO ENTER
GOAL :- CONVERT THE ENTERED TEXT INTO AN ALL NUMERALS ONLY FORMAT

Demo Here

Lets design the Form ( 2.jpeg)

Lets write a custom action to get this going

Now, lets call this function inside the form
For me, this is the sequence

Once, this is done,
Go to the Live Mode & Validate
Your appreciation is my motivation

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms | Unique values in List | HTML views |

Zoho Creator Tutorial - Custom Dashboard using HTML views

2009-05-10T14:08:00.002+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms | Unique values in List |

We have been experimenting with forms & views in zoho creator. Now you must have quite a few forms & views which when put together make a fine application. Did you know that you can create custom dashboards using HTML views in Zoho Creator?

HTML views are nothing but blank HTML pages into which you can insert your form's field variables. So they make excellent dashboards, presenting dynamic reports based on user selected criteria, so on and so forth.

To give you a peek into which what HTML views are capable of doing, take a look at the demo. Eg:- you will be greeted with your username at zoho. This is achieved by using the <%zohologinuser%> tag. If you explore the fetch records & collection variables, you will be able to see the dynamic nature of these Html views.

View Demo here

The application, displays the dashboard by default. This is done by using the various options under the customise menu. Create a hidden section and place master views to hide them from display.

HTML views support all HTML tags. In the dashboard I have inserted images, and also included the HTML view from my private application. You can also insert forms / views directly using the Form- View snippet, or use the IFrame to embed permalink of your forms & views. I have a zoho creator form embedded in another html view called Request a Tutorial. ( Home tab – drop down)

The above form is located within my private application. I am using the "Embed without login" iframe snippet code to display in the html page. So, the data submitted will go to my private application & will not be available for all to see.

Next Week's post – How to set up your custom bulk mail options using zoho creator Your appreciation is my motivation

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms | Unique values in List |

Zoho Creator Tutorial – Unique list values, dynamic pick lists & dependent list values

2009-04-06T16:12:00.011+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms |

Now that you are exploring zoho creator yourself, you might have grasped more than what you bargained for. During this learning curve you may come across certain use-case scenarios & would like to see them work. Here is a working copy of one such request that visited my inbox.

The Assignment :-

Registration form has Country & State fields.
Both have to be pre-populated drop down fields ( ie... zero manual entry. User has to pick from list.
>Based on the Country name, (Pre-populated list), the State Names ( of respective country) should be displayed in the second drop down.

Click here to View the Working demo ( Tab Name – LIST ACTIONS)

Forms & views Used –
Counry_states Form ( & view) – Single line field
Registration Form ( & view) – Single Line & Drop down

Registration Form	Country - Sates (add new country & state list here)

Use Single line fields and Drop down fields to design the forms. Leave the default "Option1, Option2, Option3" in the drop down fields. We will be dealing with them shortly at Deluge script.

Donot use pick list/ lookup field
Question:-What happens when you use a look-up field?
Answer:- It will show the country names as "n" occurances. Eg:- India, India, India, India, USA ,USA, USA, USA.
We don’t want that.. all we want the list to show is – "India"& "USA"
In other words, we want to avoid any duplicate entries in the drop down list.

Form:- Country_States

This form is used to "collect" the country name & state name. So there is absolutely no scripting involved. Do take a look at the Country States View in the DEMO link

Form:- Registration Form

You can have as many fields as you want. Since this is a tutorial post, I am limiting the fields to Name, Country & State
In the demo, you will notice that, "Country" - does not have duplicates & "State" list changes dynamically based on the country name.

The Deluge Script involved.

On Registration Form -- > > on Load.

//--------THIS POPULATES THE COUNTRY LIST WITH UNIQUE VALUES--------
Country_list = List();
Cntry = Country_states [(Country is not null)];
Country_list.addall(Cntry.Country.getall());
Country_unique = List();
for each country in Country_list
{
if (!Country_unique.contains(country))
{
Country_unique.add(country);
}
}
for each Ctry in Country_unique
{
County:ui.add(Ctry); //USE CLIENT FUNCTION -- ADD ITEM
}

CODE	YOU CAN FIND THIS AT	THIS LINE OF CODE MEANS
Country_list = List();	LIST MANIPULATION (LM) – CREATE LIST
Cntry = Country_states [(Country is not null)];	DATA ACCESS – FETCH RECORDS	collect the rows where state is not null in Country_States_view
Country_list.addall(Cntry.Country.getall());	LM- ADD ALL
Country_list=List();	LM – CREATE LIST
for each country in Country_list	LM – FOR EACH ELEMENT <expression> = country
if (!Country_unique.contains(country))	IF CONDITION	You can otherwise Type ---> country_unique.contains ( country) is false Checks if the <expression> value is present ( true) or not ( false)
Country_unique.add(country);	LM – ADD ITEM	If false, then the value is added to the list -- now, you have a unique list
for each Ctry in Country_unique	LM – FOR EACH ELEMENT <expression> = ctry
County:ui.add(Ctry);	CLIENT FUNCTION – ADD ITEM	Now, each list item is added to your drop down box

On Registration form - > Country Drop down - > User Input

//------THIS POPULATES THE ~~STATES~~ OF THE SELECTED COUNTRY-----------
States_list = List();
States_rec = Country_states [Country == input.County];
States_list.addall(States_rec.State.getall());
for each State in States_list
{
State:ui.add(input.State);
}

CODE	YOU CAN FIND THIS AT	THIS LINE OF CODE MEANS
States_list = List();	LM – CREATE LIST
States_rec = Country_states [Country == input.County];	DATA ACCESS – FETCH RECORDS
States_list.addall(States_rec.State.getall());	LM – ADD ALL	Exactly similar to Above pic - Enlarge and see. Be sure to get the state names & check the box for return field values as list
for each State in States_list	LM – FOR EACH ELEMENT <expression> = State
State:ui.add(input.State);	CLIENT FUNCTION – ADD ITEM	Select the state-drop down list --- You will see this list getting popupated based on country name

If you found this post to be of some use, please spare a moment to drop a comment.
Your appreciation is my motivation

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms |

Zoho Creator Tutorial - Stateless Forms ( Use multiple forms to update a single table)

2009-02-08T15:48:00.012+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms |

With the basics in place, I guess, now its time for us to look into some of the advanced features that you can implement within Zoho Creator application.i.e you can come up with more customizations based on your requirements. This will be a combination of form’s design & a little more Deluge script that usual.

The Assignment :-
Application Name :- Event Management
Forms used :

Master Form _Event Management (Stores data in Master View)
Event Details Form (Stateless Form)
Contact Details Form (Stateless Form)

Click to View Demo

This Event Management Application has the details of a particular event & the contact info of the person who is responsible for this event. I hope you would remember me saying in my earlier posts that, by default, Zoho Creator stores the data entered into the forms in tables, called as Views.

However, Zoho Creator has another set of forms called the Stateless Forms. i.e. the data entered within these forms, will not be saved. ( -- what the heck! , what is the purpose of having a form that does not save data --- , Hey! Friend, hold your horses. You will soon find out.)

As the name suggests, anything entered into the master form will be stored in its View. Stateless forms merely pulls the data from the master form & displays it for you to edit & confirm the edits. After doing the edits, when you go back to the main form’s View, you will notice that the edits have been implemented in the master-view as well. Sample Application here

The fields we will be using will be as follows
Master Form’s details
This is a regular form, Created the normal way. Forgot,see here

Event_Contact_ID*
Contact_Name - This is a required field
Contact_email
Contact_Phone
Event_Name - This is a required field
Event_Venue
Event_Date

Stateless Form (Stateless forms are those, whose data are not stored in Zoho Creator.)

It is a single choice that eventually decides if a form is stateless or not.

Form Fields :-

Event Details Form (Stateless Form)

Event_Contact_ID* -- > This will be a look-up field.
Event_Name
Event_Venue
Event_Date
Contact Form (Stateless Form)

Event_Contact_ID --> This will be a look up field
Contact_Name
Contact_email
Contact_Phone

Using the look up field to "show data from other forms"

Remember to include the "SUBMIT" button in your stateless forms

The Tricky part - Deluge Scripting
Master form :-

The EventContact_ID* is the most important field, because, this links all the 3 forms in this application. Hence this has to be unique. We will be generating this UniqueID using deluge script.That means, the user is not allowed to enter anything in this field. Which in turn means, go back to your Master form - Edit the field for Event Contact ID , and say - Hide this field to others. ( of course, "you" will still see it).

Deluge Script to generate the Event Contact ID.

Master Details Form --> On Add --> On Success --> Set Variable

Don’t forget to save the script.

Now run your application & enter some data into the master form.
Go to Master view and cross verify if the data is getting saved along with the auto-generated "Event Contact ID"

Verify your "Lookup field" in "Event details form" & "Contact details form".
If you had set up the look up field for "Event Contact ID" correctly (in the stateless forms), you should be able to see all od the Event Contact ID’s in this drop down list. Nothing will happen yet, just run both forms & see if the values are shown in live mode.

Deluge script to "Call the data" from the master view.

Up until now, you had been using the "Set Variable" in the script. Now, in order to "call the data", we will be using "Fetch Records" feature. So what happens with this option. . .

You "Fetch Record - data " from a certain View & Store it in a variable. This variable is now becomes a "Collection-variable" , (User Defined collection, to be more precise) ie .. Collection of data from field 1, field 2, field 3.. So on and so forth.

Question:- when to fetch the record - data ?
Answer :- After the user selects the value from the “look up field”

Stateless Form (Event Details / Contact Details forms ) ---> EventContactID (Lookup field)-- >On User Input -->Drag drop "Fetch Records"--->Edit

Now that you have "Fetched the record data", its time to show them in the form. Use Set variable to achieve this.

input.EventName = RecData.EventName;
input.EventVenue = RecData.EventVenue;
input.EventDate = RecData.EventDate;

Repeat the same exersise at Contact Details form

Contact Details Form --> Event Contact ID (Lookup field)-->User input-->
RecData = MasterDetails_EventManagement [EventContact_ID == input.EventContact_ID];

input.ContactName = RecData.ContactName;
input.ContactPhone = RecData.ContactPhone;
input.Contactemail = RecData.Contactemail;

Deluge script to rewrite the entry in the master view ( table)

Now, you should be able to see relevant records in the stateless form based on the value from the Event Contact ID list. Next step would be to edit other details & Submit the (Stateless) form. This should inturn update the details in the master view.

Question:- when to update the record in master view
Answer :- After the submit button is clicked.

Deluge Script code will be :-

Stateless Form ( Event details / Contact details)--> Submit Button --> On Click

RecData = MasterDetails_EventManagement [EventContact_ID == input.EventContact_ID]; //Use Fetch Records , to call the record data

RecData.ContactName = input.ContactName; //For these, use Update Records
RecData.ContactPhone = input.ContactPhone;
RecData.Contactemail = input.Contactemail;
Reload;

Repeat the same excersie in Contact Details Form ( Stateless Form)

Submit Button --> OnClick

RecData = MasterDetails_EventManagement [EventContact_ID == input.EventContact_ID]; //Use Fetch Records , to call the record data
RecData.ContactName = input.ContactName; // use Update Records
RecData.ContactPhone = input.ContactPhone;
RecData.Contactemail = input.Contactemail;
Reload;

Run the application & let me know if you are able to update the master field from the stateless forms. Not happening.. Feel free to drop a word to me. We will figure it out together. Chao =;
Your appreciation is my motivation

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | Statless Forms |

Zoho Creator Tutorial – Part 5 Introducing Deluge Script

2009-01-08T17:06:00.017+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields | | Deluge Script - Basics

Now that you are familiar with the basics of zoho creator, lets dig our hands into their deluge scripting. During the time when we were working on my Visual Basic application & Java applets, each one of us would have our own way of locating a specific piece of code that we might want to use in our application.

However, with zoho creator's deluge script, it doesn't mater a even haven't programmed anything beyond your TV for the various channels. Because, they have made programming as simple as drag and drop. How,..?. Read along.

Know where to write the code.

As of now, lets concentrate on the SCRIPT --> FORMS
As we move on to views & Functions, we will be looking at other tabs
You can use the drop down arrow to choose any form within your application.

As we developing our guest book, we will open the Guest Bool - FORM in the script tab. After this you should be seeing this

Here, the script does what it exactly says just there. For our application's sake, let us Add code to AUTOMATICALLY ADD THE DATE within the date field , so that the users dont have to type / select the date. Further, it would also help to know who visited when.I have already added the code in FORM --> LOAD , which is why you see a green dot ín the above pic.

What to write / How to write 'code' ?
(A) You might want to say “When the form loads”
--- Translated, you will have to write the code on Form --> On Add --> On Load.
--- If you clicked in the same order, you should be seeing this. Use the prev image and the one below to locate

(B) You might want to say “ Add todays date automatically ”
-- Translating , this would mean something like this
i.Set the Date-Field
ii.To Todays Date
--- So you should be doing this

Scroll down a bit and locate the SET VARIABLE. ( Use the image below for guidance
Drag and drop it on to the coding area.
As soon as you drop it, & if you hover the mouse, you should be seeing an EDIT &
DELETE button.

(C).How to set the value for the date field. ?
As soon as you click on Edit, you will be presented with a dialog box
Notice that the declare variable is a drop down variable. - From this select the Date field

As for the actual value , we will be using a variable called the ZOHO – currentdate It is as simple as saying x = 5. You will be telling your application that every time the form loads, just give the current date's value to my date field. For this, you will have to
1. Select the ZOHO VARIABLES ( Tab)
2. Scroll down a bit .. until you locate the zoho.current date.
3. Click DONE – & you will see this

Wait !!! -- The code is not saved yet, It is only generated – So you will have to scroll down and click SAVE SCRIPT at the right bottom corner You will see a green band that says, Script modified.
Now you are ready to go.

Access your application – psst !! ... Use the Acess thisApplication Link at the top.
Do you see the date automatically coming up in the date field ... ? Great .. You have successfully Coded your application

Now, I have a practice assignment for you. After the form loads & zoho's current date is performed, disable the date field.
Now that every step has been demonstrated with screen shots, I shall be providing only guidelines. You will have to look for them in the order specified. It is just that...I am feeling lazy to do the screen shots again ..

How to do this ?: -
Form --> On Load --> Drag and drop --> Disable field --> Select Disable – option --> select date field --> Done
Save Script

How to check this ? --> Acess the application -- > You should not be able to change the date manually.

Zoho Creator Tutorial – Part 4 ( premade Form Fields , Zoho Creator does the validation for you)

2008-12-26T18:48:00.003+05:30

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields |

If you had been following this tutorial closely, you should be able to perform the following based on last week's post,

Create a new form
You should be able to design your form.
Add fields that are relevant to you.
Rename the fields for display and scripting
Embed the form within the blog website ( Hint : -Form's Live mode - More ction – Embed in website – Access without login – Get code – paste in your blog )

I guess you would also remember me telling that Zoho Creator has provided with ready to use fields based on their data types.

Field types	Can be used for They are all so self explanatory, I am just listing them here.
Single line	Names , one liners up to around 300 characters.
Multiline	As the name suggests, can be used to get "paragraph" type info from your readers / clients.
Email	Eveything is automatically validated. Incorrect entries will not be accepted by the system. Take it from me, this kind of validation used to be a grind, but not anymore
Url
123 Number
0.1 Decimal
% Percent
$ Currency	Set the currency type ( USD / INR / YEN.. etc. Pick the one that suits you)
Drop Down	Here you can give a custom set of values of your choice.
Radio / Option buttons	You can provide any number of options, but only one will be selectable by the user Eg: Male / Female
Check box	This comes handy when you have multiple options & the use also need to select more than one from what you have provided EG : A Person can like Red , Blue & Green
Multi Select	This is more like a list box, from where the person can click and select You can choose to display the list sorted out in alphabetical order
Date
Date – Time	Gives you a timestap along with the date
Look up ( also called as Pick List)	This allows you to call data from one form into another form. (We will be dealing with this shortly.)
Formula	This computes values for you based on the values on other fields. Eg: Formula will do MathScore + ScienceScore , where in MathScore & ScienceScore are numeric fields . All you have to do is give the fieldnames & + operator Advaced computations are made easy by the formula fields
Image	You can actually collect images without the fear of overloading your inbox. You can as for the URL / Alternate Text / Source etc all using the zoho creator form. Plus you also know who submitted what and when .. if you would add the date & Name field to such a form
File Upload	This can be used to gather any file type. Automatically gives the browse button so that reader can upload from their system.
Add Notes	Use this as sticky notes, something that you want your viewers to know. ( notice the welcome text in the form below)
Decision Box	This can have only one answer YES / NO Most commonly used as disclaimers.

I have modified the guest book forms and placed the code here. You might notice that some fields have a * attached to them. This means these are mandatory or compulsory fields. If you try to submit the form using blank data for these fields, then the submission will be not processed. This is catch those wary visitors who are not attentive enough

How to Set up compulsory fields

As soon as you place a field by click and Drag ( or) Edit a certain field
Click on Options
Notice the check box that says "This is a required field" - Click it
The field becomes compulsory.

Similarly you can set up if you want to have a Hidden field / Disallow duplicate enties. I have embedded my guest book form above. Feel free to come up with your own version of your guest book & give me your link. I shall surely drop by and will be glad to see your progress Your appreciation is my motivation

What is Zoho Creator | The Basics| Design & Share Custom Forms |Using prevalidated Form Fields |

Zoho Creator Tutorial - Part 3 ( Design & Share Custom Forms)

2008-12-18T14:06:00.009+05:30

What is Zoho Creator | The Basics | Design & Share Custom Forms
Be the real world, or the virtual world, have you ever wondered how prominent forms are? The very act of handing over a form translates into to some kind of "organised" activity. (How organised is it really… is a subject of debate). What is the first thing you do when you get connected to the internet ? … Of Course!, check the mail ( what a dumb question .. isn’t it ?). But hey !, wait there is much more between that. As soon as you connect to the internet, you open your browser ( IE / FF / Safari / Opera). Then you view your signing in page for the mail. Now STOP!. What do you see… A FORM that asks for your UserID and Pwd. It is only after this you get to reach your inbox. So you see, there is no escaping from Forms. If you intend to collect data , then you need an interface to collect them. Forms provide just this. So, gear up to design your custom form.

Designing the form using Zoho Creator :-
Remember :-

Forms accept data & Views display the data
Both above actions happen only in live mode.
Designing Forms takes place in edit mode.

As soon as you login at zoho Creator, you will be greeted by your dashboard which lists all your applications.

Zoho Creator not only allows you to create your custom forms, but also reduces the work load by providing ready-to-use fields for specific data types.

Say, the 123Number field-type will only accept numbers. Any Text will be rejected by the system (without you having to write code to validate.)

Earlier, there was just one field NAME. Now lets customise the guest book form with some basic elements.

Feel free to explore the possibility of using other field types such as Radio – for Male / Female , ADD NOTES – to have a standard piece of text by way of explanation etc etc.

If you wish to edit the existing fields ( Change NAME --> To --> YOUR NAME )
Another EDIT EXERCISE: - Edit the Blog URL field & Remove the tick mark from "Link name required".

We have experienced those moments of " OMG! .. I Forgot to Save". Not anymore. Coz, zoho creator does it for you without having to click on any "SAVE Button". ( ... actually... you wont find any save button).

Once you are satisfied with you form's design, fields etc, go to the live mode using the ACCESS THIS APPLICATION link.

Go the form in Live mode
Add few data and submit the form
Locate the view for this form ( don't remember how, Read again )
Confirm if all the data you have entered are seen

Now that you have designed the form & have tested it, it is time to test it in real time.

How to put Zoho creator form in Webpage / blog ?
Once you are in the live mode of the form, notice the More actions link at the top of the form & follow 1 & 2 as directed below

It is wise to share the forms using the url that is generated after Access form without login. Use the code and paste it in your blog.

You can use the HTML/Javascript element & paste code. If you want the form to appear right inside the post, then write a new post, and paste the code snippet in the EDIT HTML mode of the post.

Invite your friends to sign your guest book. See your form in action.
If you have any problem, drop me a word, I shall be glad to help.Your appreciation is my motivation Thanks in advance for linking to me at your blog.

What is Zoho Creator | The Basics | Design & Share Custom Forms

Zoho Creator Tutorial - Part 2 (The Basics)

2008-12-09T15:49:00.007+05:30

What is Zoho Creator | The Basics | Design & Share Custom Forms

Welcome back ! I believe that by now, you would have your zoho creator login so as to proceed further. I will not be surprised if some of you have already started to explore its interface, get to know the workspace etc. Way to go !..

So, lets start from the beginning. As I have mentioned in my previous post, Zoho creator allows you to create forms & store the data obtained via these forms, and also do scores of other things. Before we start on those, it is essential to know the elements associated with zoho creator. This is get used to the terminologies. But before you start, open up Zoho Creator and login with your User ID and Pwd in another tab / window.

Applications :-
It is much easier to realate Zoho Creator Applications as Excel work books. Understand that you are allowed to create only 10 Applications (~workbooks~ notice the red bar on the top that says this) with free membership. However, with paid membership, you can have unlimited applications. From what I have seen, 10 applications are more than sufficient for individuals and small business owners.

Inorder to create an application, use the Create New Application link in your dashboard.

Lets start off by naming it as "My Personal Application". As we progress with this zoho creator series, we will be using this application to add forms and do other stuff.

Zoho creator allows you to create 10 applications for free. Please lend me one, during the course of this zoho creaor series.

Forms :-
After creating the application , you will be automatically redirected to the My Guest book – form area where you can design your form. Although we will be seeing this in details in the upcoming posts, lets start of with a single field.

Do you notice the INSERT FIELDS in the left & Drag and Drop fields on the right. … So it would be appropriate to say here that You are in the EDIT MODE of the form.

Add a single line field , & give the Label Name as NAME

For the moment, lets have only one field . We will be adding more fields in the upcoming posts.

Live Mode :- (Run the form)

From here, things begin to get technical. There is no need to get perturbed, you will get used to it in course of time.Now, you have your first form ( with a single field NAME).It is time to use this form to gather date.

Use the ACCESS THIS APPLICATION link in the top to go into the LIVE MODE.This will take you to the LIVE MODE where data is entered into the form.

Go ahead, Enter a few names and click submit. AS soon as you Submit the form, you should notice a message that says "Data added successfully".

Views :- Where does all the data go ?

Zoho creator uses "VIEWS" to strore the data collected via forms. Views are nothing but tables that are automatically populated with data is added to a form.

Every form by default has its view. The name is usually [FORM-NAME] & View. Just as in this case "My Guest book View". The View displays the data only on Live Mode. In the upcoming posts, we will be learning more about how views behave in the edit mode.

Now, that you have located your form's View, Go ahead and click it. You should be presented with something that looks like this

Lessons Learnt :-

Create a new application & name it as "My Personal Application".
Create a new form & name it "My Guest book".
Add a single line field to above form and name it "NAME" --- This happens in the edit mode of the form
Use the ACESS THIS APPLICATION link to go into the LIVE MODE
Add data into the form and click submit… "Data submitted successfully" confirms the submission
Locate the view that is autogenerated for the form , It is named as "[ FORM NAME ] & View"
See the data entered via form in a tabular format.

Things to Remember.

Zoho allows 10 free applications
One application can have any number of forms.
Data can be entered only in Live mode
Entered Data can be seen only Live mode …. Use VIEWs for seeing the data.
You can also Add / edit / delete data from the views directly.

It might take a while for the information here to sink it. If you feel overwhelmed, take a break and come back again. I assure you, once you get the hang of things, it will be next to impossible to let go. Your time will be worth every second while you aclamatise yourself with zoho creator.

Feel free to share your thoughts, I shall be gald to respond.
Your appreciation is my motivation

What is Zoho Creator | The Basics | Design & Share Custom Forms

Zoho Creator Tutoral Series – Coming Up

2008-12-03T13:49:00.008+05:30

I hope you remember my earlier post 5 months back, Zoho Creator :- Only intuition, no programming. (You couldn’t have missed it, coz I didn’t really post anything after that). As promised, I am here again with the intention having a zoho creator series for all those who are not afraid to try.

Not all are programming experts and not every one can say the difference between relative fields and relational databases I get confused more than i am credited for .. thats the way it is . So, this is for the common man, who can read write and understand English. You see.. Zoho creator is in english & I am blogging about it in english…Oh!.. btw, they have a Japanese version of the sitetoo.. but "iie – arigato gozaimus" .. I don't speak anymore than this in Japanese.

The idea is to walk you through the process of building an application using zoho creator from scratch.

Walk with me.. let me know if I can be of assistance.

Zoho Creator – What is that ?

Before I answer this question, tell me how extensively do u use MS Excel?. The reason I ask is, a layman's concept with zoho creator is somewhat based on based on this. Hmm.. lets see… the rows and columns reduce half the work load. The auto filter in excel allows you to sort / organise your data. Perhaps you are even familiar with using formulas ( basic math – to – advanced formulas). Lets say we have an excel sheet like this & call it Guestbook.

Date	Name	Email	BlogUrl	Comments

But, if you want to gather data using excel, then you would have mail it as an attachment ,OR share it as excel sheet with other users using some file sharing platform. This will work great, if you know who is going to use them. Plus, you have to be sure that the people who are using this excel are within your network and trustworthy… That is to say, the "data is private among trusted users " & "there is no way to gather data outside this small network of friends"…

So, ….Are you with me so far ????..

Now, think about this. You have a Form & this form reflect the "structure" of the YOUR excel sheet.

This has all the elements that you want the user to add. Yet, none of them can see the actual data. Now, this is your "web form" that you have customised to suit your needs. So what happens next, You can either embed this form within your website As Shown above , or share the permalinks of the form via email. (There is more to sharing.. .lessons follow…)

What zoho creator does is to "allow you to create forms" using their WYSIWYG editor. (.. lessons follow..) And, this also allows you to view / edit the data collected via these forms at Zoho Creator. ( .. lessons follow…)

In short – Zoho creator allows you to build custom database application using WYSIWYG editor.But, inorder to start, you need to Signup with Zoho Creator. So go ahead, Register yourself and get a login, You may also signin wiht your Google Account.

Thats pretty much for the introduction,
See you soon with your login at zoho creator.
Your appreciation is my motivation

Zoho Creator :- Only intuition, no programming.

2008-07-17T19:01:00.009+05:30

It has been a while since I posted anything here. I was waiting for something worthy enough that is usable and feasible. I must say, my wait did not go in vain. I came across Zoho Creator, and have been trying it out for the past 6 months before making my first post about it here. I proudly admit the fact that I have integrated Zoho into my actual working environment, which has taken the load of report maintenance off my shoulders. These days, I spend only 2 hrs a week to consolidate my report. I use the free version, but sure have the plan to switch to business version soon enough.

Zoho Creator is one of the many products in the Zoho Family. ( I shall be talking about each of them in upcoming posts). ZC allows you to create forms that can be embedded in website and blogs ( see below). The data collected via this form is stored within your Zoho-View section

The advantage of Zoho lies in the fact that

There is no huge download or installation.. Because this is a WEB APPLICATION
The Registration is free
You need not have any programming knowledge
The interface is exceptionally intuitive
Drag – and – drop allows you to design custom forms
Logical flow of events will guide you to do the scripting.
Embed the form in your blog and collect data
Various choices on how you wish to process the data collected ( HTML, Excel, JASON, AJAX, Pdf , ) for novices and advanced users alike.
The feeds can be integrated into feed readers, HTML displayed wthin iframe,.. possibilities are immense.
Applications can be shared with any number of users ( say you have created the application and want you friend to moderate the content… go ahead and share it)

Here is the catch :-

Only 5 Applications allowed for free users
Unlimited Application for premium users + Custom Logo integration.

What you see below is a Form that acts as my GuestBook. Feel Free to share your thoughts with me.

Application Name : - Personal ( This has abt 8 forms, one is shared with you here)
Form Name : - GuestBook.

All you have to do is, Enter the details and submit. Take a look at the HTML display of data collected using Zoho Form.

I shall tell you more about creating custom forms using Zoho in the coming days.

You can develop a simple form like Guest Book , which has minimum scripting ( auto date ), or , developing a complex form that allows you to generate and send email-verification code right from zoho form, which involves more complex scripting.

Bloggers have long loved interaction with their readers. After all, isn’t that why we enable comments? Here is something to take this level of interaction a step further. How about developing a custom application to cater to your needs?. Well, if you feel lack of programming knowledge, and the mind boggling software installation ( not to mention the price) is pinning you down, not anymore. Try Zoho Creator, I am sure you will eventually end up using it. So, how about hsaring what you have in mind... ? ?

Your appreciation is my motivation

Show your Pdf documents from inside your webpage

2007-12-28T10:22:00.000+05:30

Those who are involved with lot of document exchange will probably agree with me that Pdf's are great way to distribute your original document. With Pdfonline.com, the conversion of documents from the various formats {MS Word (DOC | RTF)--MS PowerPoint (PPT)---MS Publisher (PUB)--MS Excel (XLS)--HTML (MHT)--Text (TXT)--JPG , GIF,TIFF, BMP,PNG, EMF,WMF } to pdf is just a click away.

However, it has been in the wish list of many bloggers and e-publications , over some procedure to display the contents of the pdf documents by embedding them directly in a web page. Until now, the pdfs would be uploaded to some common file sharing network , and the link to the pdf would be specified in the web page. The person whoever wishes to read, has to download the pdf to his system.

Not anymore... now you can show the contents of the pdf right inside your blog / webpage. Surprised.. below you will see a pdf document that I have created as a test document and its content displayed for all of you to see ( without downloading). Use the slider near the ZOOM tool to get a closer look and the HAND tool to drag the page

This is now possible with the help of services from http://www.scribd.com.Not only with pdfs, Scribd allows us to upload and publish documents in other formats also (check out their FAQ)

You can also customize the document for private - public viewing, Allow - disallow printing, Allow-disallow comments, and even more.. Just explore and you get to know better. I personally find this extremly useful for pdf's ( for other formats depending on the file size, the conversion might take a little longer).. so.. Liked this... Its simple and easy.. just follow the instructions closely

Look for a link that says UPLOAD

You may upload a document from your Hard Drive (or) specify the URL of the document

Once upload is completed, it will start converting , so that your document is embedded in a flash player ( which is used in the webpage)

Depending on the number of previous documents in queue, this might take some time

Once the conversion is completed, you just have to click on the file to see it on Scribd

On the LeftHand side of the document page ( in scribd), you will see various options to share the file

There is also an Embed Option ( You may not see this immediately after the file upload.. I had to wait for abt 12 hrs to see the embed code... so just upload the files one day ahead of schedule, to be on the safer side)

You may copy paste the Embed code to your blog to show the pdf

The Advanced option allows you to change the height and width of the display area.. so that you may modify it suit the appearance of your blog / website

Thats it... you have the embed code.. now all you need to do is Copy paste the code at the appropriate position in your blog for your friends to see

So you see... displaying the contents of a Pdf file in a webpage is not impossible after all... it just took us a little longer to know about Scribd. I prefer to use this exclusively for Pdfs .. perhaps, you may find other attributes of Scribd more interesting. Dont hesitate to share your thoughts with the rest of us. If you find this post has been helpful in some manner, do drop in a word at the comments page
Your appreciation is my motivation

Blog Posts can be saved as PDF's to be printed later

2007-11-11T06:29:00.000+05:30

This might not come as a new information to many of you, yet I am making this post as per the request made by Bruce - from Brazil. You may have noticed a small link at the bottom of the post Clicking on this link (at the post-page) will save the post as a pdf file, which you may either save to your system and /or take prints later.

This is the PDF creation widget from http://savepageaspdf.pdfonline.com/index.asp. This is free and is very easy to incorporate in you blog.

GENERATING JAVASCRIPT CODE

Signup with http://savepageaspdf.pdfonline.com
You will be directed towards PDF conversion-setup page
Before actually configuring the pdf widget, do paste one of your post-urls in the Textbox and click the CONVERT TO PDF button.... take a look at the resulting pdf page..for contents, margin , paper orientation (portrait or landscape etc)
IF you are not satisfied by the default values... modify the margin accordingly and obtain pdf that suits your need.
Now that you have tired and tested the margins and orientation. You may proceed with customizing this widget for your blog by clicking the GENERATE JAVASCRIPT button
Now the code for pdf creation is ready and is displayed in the bottom textbox

Adding the script to the POST-PAGE ONLY
This will display the at the post page only...will not be displayed in the blog indexpage (unless you specify in the sidebar). Locate the code in blue and insert the code as inditated in red in Template - edit template - expand widgets template
<b:if cond='data:blog.pageType == "item"'>
<h2 class='date-header'><data: post.timestamp/></h2>
ADD THE JAVASCRIPT CODE
<b:include data='post' name='post'/>

Adding code below each post to be displayed in blog index page
Remember :-... what you see is what you get in the PDF file.IF the index-page of your blog displays post summaries (like here) then .. saving as PDF will only save the displayed information that you see in the index-page of the blog
The entire post shall be saved as pdf only of the permalink of the post (post-url) is displayed in the browser
<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/><data: post.author/>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data: post.url'>
<a class='timestamp-link' expr:href='data: post.url' title='permanent link'><data: post.timestamp/></a>
</b:if>
</b:if>
</span>
ADD THE JAVASCRIPT CODE
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>

Hope this helps.Your appreciation is my motivation

Track your comments in Blogger

2007-10-26T08:00:00.000+05:30

The first step being a blogger is ones willingness to read other bloggger's posts and leave a comment without feeling lazy. But , imagine bookmarking all the URLs where we have commented . Thats a long list in our Favorite folder. I used to hate when I have to 'spring clean' my favorites.. especially for past posts where I have posted comments. Sometimes in a hurry, I also forget to bookmark the link

But now you can keep track of the comments you make in blogspotblogs by just clicking the textbox that shows up when you post a comment. Isnt this a cool thing. Now all you have to do is just click on the check box.

In course of time we tend to get bored by the same topic and decide to unsubscribe from a particular post's comments.You can unsubscribe any time using the "unsubscribe" link at the end of the mail you receive in the mail box (or) click on the "unsubscribe" link in the comment-page

Your appreciation is my motivation

UPDATE :- Instructions ...Write comments from directly from the post-page

2007-09-24T08:59:00.000+05:30

In my previous post I was telling about how Jackbook has developed a hack to allow blogspot users to post their comments directly from the
post page. However the link to jacks instruction is not working for some strange reason. Nevertheless I am posting the instructions here . Hope Jack will not be offended.. this is just a Repeat-post..

Instructions to allow the comments from post page itself

Settings - Comments - Show Comments in POP-UP window - YES
Save and Back up you existing template

Note that the "Expand Widget Template" has the "tick" mark

Locate the code given below and add the lines marked in red

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>





<div id='comment-parent' style='padding-bottom: 20px;' onmouseover='showcomment("hoverme", "comment-child");'>
<h3 id='hoverme' style='display:block;'>
<img alt='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.' src='http://lifewg.googlepages.com/html-code-leave-comment.gif' title='Your cOmment"s Here! Hover Your cUrsOr to leave a cOmment.'/>
</h3>


<div id="comment-child" style='border: none; display: none; height:750px; width: 420px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
<iframe style='border:none;' expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' width='100%'/>
<br/>
<a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
</div>


</div>

</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Write the code below ABOVE the </body> tag

<script languange='javascript'>function showcomment(a,b){var jackbookdotcom = document.getElementById(a);jackbookdotcom.style.display = 'none';jackbookdotcom = document.getElementById(b);jackbookdotcom.style.display = 'block';}</script>

Locate the code below and replace the code shown in red with the code written in green

Save Template and view any Blogpost ( which has comments)

Move your mouse over the comment-form... all the existing comments will be shown allong with the comment form to add new comment

TO ALTER THE HEIGHT-WIDTH-BACKGROUND OF THE COMMENT-FORM
Notice the lines shown in red in the code below

<div id="comment-child" style='border: none; display: none; height:750px; width: 420px; margin-bottom: 5px; background: #fff none; border: 1px solid #FCO;'>
<iframe style='border:none;'
expr:src='data:post.addCommentUrl' height='100%' scrolling='yes' width='100%'/>
<br/>
<a href='http://www.jackbook.com/2007/06/how-to-make-readers-leave-comment.html' title='Want to have this on your blogger/blogspot?'>Comment Form under post in blogger/blogspot</a>
</div>

Here height:750px; width: 420px; is responsible for the width and height of the comment form
You may change the width:99% to occupy the entire width of the colum
You may change the height:800px to increase the comment form section.... just play around with the values till you are satisfied
You may change the background: transparent, if you want the comment section to merge with the background of your blog
You may change to background:#DDDDDD, if you want to give a unique background color for the comment section... Use the hexadecimal color chart for any color of your choice

Hope this helps till Jack's page is available to all of us once more. do drop your comments to express your appreciationYour appreciation is my motivation

Post comments directly from Post Page

2007-09-16T18:37:00.000+05:30

UPDATE:- I have Posted the instructions on How to Add comments from post page.. after repeated requests from readers regarding the error while trying to open the Jackbook-Instructions page

It has been a long time wish for many blogspot users to have the comments form appear in the post-page itself.. so that the reader need not click on "Post a comment" link at the end of each page.. Now the wait is over.. We are now able to post comments from the post page itself by applying the hack devised at Jackbook.com

Still having your own doubts as how this might work.. just click on any post title to open the page at its Post-URL... you will see the comment form below the post content.. Move your mouse over the comment-form and voila.. the existing comments show up along with the form for you to post your comment

The instructions are pretty simple to follow.. so just go ahead and do it now.

Compose your header by combining several images - Photoshop

2007-08-26T22:00:00.000+05:30

Not all of us are happy with the image that blogger gives for the header.. sometimes it doesn't fit well with the concept of the blog.... and searching the internet for a relevant picture that conveys the idea behind your blog(Title) is time consuming and cannot guarantee success.

You may have a certain collection of pictures... when put together might give a boost to the appearance of your blog... but don't know how to go about it... Never mind.. just read the instructions and you will have your own custom header... Checkout the Header here

Just for starters.. I have two images here.
JUST 4 PICS PUT TOGATHER.... NO SPECIAL EFFECTS-

Here...I HAVE MERGED THEM TO GIVE A SINGLE-PIC-LOOK

The idea is to combine the 4 pictures and create a new one that appears to be a single picture.... I have used 20 images to create a custom header for My Photoblog.. check it out

I have used Photoshop to achieve this effect.. Few important guidelines before going about creating your custom collage
PHASE-1

Decide on the dimensions of the final picture you want (normal header is 980 x 200)
Create copies of the pictures u want to collaborate ( this way you always have the originals to fall back on incase your attempts go hay-wire)
Get used to working with the TRANSFORM OPTION.......
- Resize the picture window.. so that you can clearly see all 4 corners ( by clicking and dragging the right corner of the picture window)
- Select the entire picture --- Ctrl + A
- EDIT-FREE TRANSFORM (or)----Ctrl +T
- Notice the change in the cursor when you position it over the anchor points (change to double headed arrows) at the corners and in the Left &Right sides (and) at the Top & bottom
  - Click and drag the points in the sides.. .. this will alter the width of the picture
  - Click and drag the points at the top / bottom .. .. this will alter the height of the picture
  - Click and drag the point at the corner.... will alter the width & height at the same time
  - Click and drag the point at the corner while keeping the SHIFT key pressed.... will alter the width & height and also maintain the ratio between the height and width
- Notice the cursor change to circular shaped arrow when positioned at a certain angle in the corner
  - Click and move the mouse.... this will turn the picture at an angle
- Hit ENTER once you have decided to apply the changes
- IF you donot wish to apply changes.. click on any tool... and a message-box will pop up asking if you would like to apply the changes.. just say DONOT APPLY

Some information about Layer Mask ( IMPORTANT.. WE WILL BE USING A LOT OF THIS HERE)
- As the name suggests... it links to the layer which holds your picture
- WHILE DRAWING ON THIS LAYER... those areas are rendered invisible in the picture ( I WILL TELL YOU HOW).. this is called masking selective areas in the picture
- In case you have masked the wrong area.. and want to undo.. use CTRL+Z
- Even after undoing.. you are not happy... no need to panic and delete the entire file
- Just right click on the link symbol that appears between the image and the mask
  ... and give DELETE LAYER MASK
- Your picture is again back in its original state
- You may add a new Layer Mask and continue with masking the way you want it to be

Start with a 400x300 image that holds 2 images..... just to get acquainted with the whole process of the before and after appearance ... before trying the 980x200 image for header

PHASE 2-----INSTRUCTIONS TO CREATE YOUR COMPOSITE HEADER

Open Photoshop and create a new file giving the dimentions .... Lets name it Collage.psd
Have a Transparent Background
Open the all the images that you want to combine...( ALWAYS SAVE YOUR ORIGINAL IMAGES AND ... USE ONLY THE COPIES HERE)
We are going to resize & transform the images so that they fit into the New file.. ie Collage.psd
1. Select IMAGE-1 and use the TRANSFORM TOOL to resize and rotate .............. PHASE1--STEP3
2. Apply changes by hitting ENTER
3. You will notice that the resized picture is already selected ...(take care not to click anywhere at this point)
4. Copy using Ctrl+C ( or Edit- Copy)

Click on the New file ...Collage.psd

Paste using Ctrl+V ( or Edit-paste)
You will notice that the image is added as a new layer in your layer pallete
If the resized image is too large / small... donot worry.. just click CTRL+T to transform the image
Increase / Decrease the size... or rotate the picture... and hit ENTER when you are satisfied
Use the Move Tool to move the IMAGE-1 at a position you feel best

Follow STEPS 4 & STEP 5 till you have all the images positioned neatly and arranged according to you wish
Save the Collage.psd frequently so that you donot loose any changes... Once you are satisfied with the manner of arrangement of the pics... you may close the individual pictues
You may notice that they overlap with once another... and certain pics are displayed only half... here is where the magic of Layer-Mask starts
Its advisable to start from the topmost layer and then work towards the layers positioned at the bottom
1. Select the layer whose areas you want to render invisible... and look here at the bottom of the layer pallete
2. Click on in the layer palette to add the layer mask
3. You will notice that the image layer has changed to this
4. Notice the double outline around the Mask-Layer... this means that the "Layer Mask in selected"
5. Always make sure that the Layer Mask is selected when you begin the Masking process
The Process of Masking the areas in the image which you donot want to be seen
1. Make sure that the MASK LAYER IS SELECTED
2. Click on the Brush-Tool ... if you see a pencil then click and hold the mouse button down a little longer... you will see the brush... then click it
3. In the Brush Tool bar ( Seen at the top... just below the Menus)... ... click on the down arrow to adjust the diameter of the brush...ie... make the brush large / small
4. Similarly adjust the strength / hardness also
5. Select the various styles of hardness from the list given
6. Make sure that the foreground color is black
7. Once again make sure that the MASK LAYER IS SELECTED.... the double outline at the mask layer
8. Now just click on the image.. at the area which you wish to conceal
9. Notice that the particular area is faded & erased.. revealing the image underneath
10. Also notice that the Masked-Layer (in the layer palette) will show patches exactly in the same areas where you had concealed.. SAVE collage.psd
11. Continue procedure.... (h) (i) (j) till you have masked ( hidden) the relevant parts of the image
12. Once you are satisfied with the appearance of this layer... choose another image ( which is in another layer) and repeat the processes from STEP-9 ( a,b,c,d,e) STEP -10 (a,b,c,d,e,f,g,h,i,j,k,l)
You may notice .. as you slowly start masking the layers.. one by one.. all the pics merge into on another to create a single-picture-look... Save your Collage.psd
Now save this image as a jpeg by FILE - SAVE AS - choose JPEG from the dropdown box.. and give a name
VOILA !!!... your own custom collage is now ready for upload to be displayed

Hope I have included every conceivable obstacle that you might face... incase I have missed out any do let me know by dropping a word at the comment section.. Once you get the feel of working with Layer Masks... there is no stopping at the effects you can achieve in matter of minutes. I insist that you experiment with the procedure listed above by choosing 2 pictures and merging them as one... by using layer masks...

Once your Eyes & hands work in synchronization ... then you can go about merging 'n' number of pictures to give yourself a customized image that can be used in the header - background .. or just plain composite image .

If this post has been helpful to you.. do drop a word of appreciation. Your appreciation is my motivation

Customizing Search Widget

2007-08-20T13:34:00.000+05:30

Blogger has introduced its Search Widget so that we can search for terms that are not included in Labels but could be present in the posts. Just like any other widget, you may drag and drop this at any position at the Template - page elements section. Here I shall giving you some self-help instructions so that you can customize the appearance of the widget and the result to suit your blog's color schema. Before I get into the widget-code and details of style sheet... let see which part related to which section of the code. Its possible to customize everything that appears here... however... I am going to emphasis mainly on the Tabs & Results pane

THE SEARCH FORM

Once you add a search widget to the blog form the page elemets.. and see the HTML of the widget you will notice that
<div class='widget-content' style='width:95%'>
<div expr:id='data:widget.instanceId + "_form"'>
<span class='cse-status'><data:loadingMsg/></span>
</div>

<div class='widget-content' style='width:95%'> Width =95 % determines that the search box occupied the 95% space of the area where you are placing this widget. Lets say you are keeping this widget in the sidebar .. then the search box & the search button together will occupy the 95% of the sidebar. Play around with this number .. you will see the search box decrease and increase in length accordingly

<div expr:id='data:widget.instanceId + "_form"'> Here you will notice "form" which means that the search box and the search button are put togather in a form when this widget was created... and the developer has deiced to make them appear in the same line. So If you feel like putting the search button below the search box.. then I am afraid.. it doesn't seem to be possible now. However.. we can always play with the width and decide on the optimum width that suits your blog

<data:loadingMsg/>This is something that shows the "LOADING....." message when the page is being downloaded in the browser... you can delete this tag and add you own custom message as ..." Wait.." or something else

TABS ( OPTIONS YOU CHOOSE WHILE CONFIGURING THIS WIDGET)

If you remember... while configuring the search widget in the Page Elements Section.. you have the options to allow search to be performed amongst the posts / texts in Your Blog - Links that you have given in your blog - The Entire Web. Now the results for these options appear as Tabs ( see pic). Blogger has provided us with the default style sheets for the search widget so that we can modify the appearance of the Tabs & Results ( after all this is what the reader sees after hitting the search button)

The Edit-HTML of your template ( Check the Expand widgets box) will have the following. You can give the color codes of your choice and see the difference it makes in the appearance of the tabs

For ..ACTIVE Title -TAB	For...INACTIVE Title-TABS
#uds-searchControl .gsc-tabhActive { border-color:<data:borderColor/>; border-top-color:<data:activeBorderColor/>; background-color:transparent; color:<data:textColor/>; }	#uds-searchControl .gsc-tabhInactive { border-color:<data:borderColor/>; background-color:transparent; color:<data:linkColor/>; }

DISPLAY RESULTS

The Results pane is always displayed above all of your blog posts. You will see the following in your template which is responsible for the appearance of the Results in your blog . You may see that I have changed the background color to the value of the pale turquoise color

#uds-searchControl .gsc-results
{
border-color:#cccccc;
background-color:#D7FDFC;
color:black;
}
With a little customization.. the dull looking ( but very effective) search box can be given a total makeover so that it begins to look like a part of your blog.If this post has been helpful you... pass the word and dont forget to link back
Your appreciation is my motivation

Custom SearchBox - Blogger.Draft feature

2007-08-18T06:18:00.000+05:30

This is a dream come true for all the bloggers who are apprehensive to incorporate the "Google Custom Search Box" in their blog.. Where search can be performed exclusively for your blog... Confused.. try searching for something in the Searchbox you see above. Watch how the results are displayed in Tabs..

Results from This Blog

Results from the Links used here

Results from The Web

The Best part is.. the results are displayed separately for easier identification
This is the SearchBox widget being introduced by Blogger_Draft dont worry too much.. Blogger Draft is where blogger introduces its new features for us to try out and give our opinion... following which the widget will be introduced at the regular blogger dashboard

Inorder to be able to use the widgets introduced in draft.. you just need to type draft.blogger.com in your browser..Lo!.. you have your dashboard.. looks the same eh !..
Now go to TEMPLATE - PAGE ELEMENTS- ADD PAGE ELEMENTS... you must be able to see the SEARCH BOX as new widget amongst all other regular widgets Just add the widget and give your choice towards searching.. you can restrict the search towards your blog only... or allow results from all over the web .. right inside your blog

You may move the SearchBox like any other widget... and the results are always displayed at the area just above your blog posts... so that the reader can see them at "eye-level".. without having to scroll to the end of the page or so

Personally I would prefer to use this than the GoogleCustomSearchBox.. reason being.. i find the customization - incorporation - display of results to be very clumsy ( at least for me)...which is why I never had a search box in my blog all these days. Just try it out.. if you dont like it.. you can always remove the widget... what do you say ? ? ? ?
Your appreciation is my motivation

Paint.net - Free Image editing tool for those who cannot afford Photoshop

2007-08-09T06:30:00.000+05:30

Photoshop is THE TOOL for image editing... and there can be no second opinion about it..( Ask some die-hard Photoshop fan.. we can come up with umpteen reasons.)..However.. not all can afford to get a copy of Photoshop and the trial versions don't last more than 30 days & they don't include all the features that are otherwise available in the complete versionFor those who cannot afford Photoshop... help is near.

With the .Net technology gaining pace.. can MSPaint be far behind. We have a newer version of Paint called the Paint.net. This is a freeebee so anyone can download it for free (just a click away..and only 1.4MB).. and you get the full version ( so no alert messages telling that the trial period is going to expire soon.). What makes this a great alternative tool for image editing is... its interface is very user friendly...It has all the tools and MSPaint and most of the tools of Photoshop.Moreover they have a Forum to help newbies and a Wonderful Blog telling about the recent updates-features-and many more

About Paint.NET
Paint.NET is free image and photo editing software for computers that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins

Every change you make can be performed in layers.. so that .. incase you are not happy with the change... you can delete the layer .. while retaining other changes made

You can add new layers to brighten your otherwise dark picture ( incase you forgot to turn the flash on)

You can correct the Red-eye.. ( so nomore last minute fiddling to enable red eye in camera)

You can add your own signature Text .. like © Deepa...adding your own copyright..(coool isnt it??)

Supports all major picture formats ( except for Animated Gif files)

And many many more option... Explore and you will not be dissappointed... The posiblities are immense.. after this.. its your imaginatrion and Paint.net.. They also have a Forum to address user Queries.. So any query.. however trivial.. there is always someone to guide you.

Here I will just give a small intro on how to add your copywright mark to the pic

Copyright is something like "© Deepa" which I put in the pictures that I upload to the net.. which means that this pic is entirely mine .To do this is Photoshop.. we need to use the "custom shape tool"... however in Paint.net.. this is the procedure to add © to the pics

Remember always create a copy of the original picture to work on.. Try not to make any changes .. however slight to the the original.. You may end up loosing a perfectly good picture.. incase the alterations does not come out right

START-RUN -Charmap.exe .. or Start-Programs-Accesories-SystemTools-Character Map

Either double click the © symbol.. or clcik the select button ( or make a not of the "KEYSTROKE combination as shown in the pic"

cick the Copy button

Open the Paint.net window( where you have the pic already opened) and select the Text Tool

Click at the position where you want the copyright stamp to appear.. ( Its wise to have this stamp at any of the corneres.. so that people can admire the picture withought gettng distracted by the stamp)... Dont worry if the position didnot match exactly with what you had in mind.... There is something called as "moving the text"

Once the Cursor blinks.. just paste using Ctrl+V ( or Edit Paste.. or use the KEYSTROKE COMBINATION ).. you will see the © appear.. following which you can type your name / time stamp of the photo.. etc etc

You many also choose the font size / style and color

Inorder to move the "TEXT" that you have just now added... just click and drag the Square like thinggy to the postion that you might feel appropriate

Save the Picture as Jpeg once you are satisfied with the changes...

Do drop in with a word if this post has been useful to you.. also..please express your appreciation by linking back to this post.. after allYour appreciation is my motivation

Show thumbnail Image preview of your Photoblog posts...using Blidgets

2007-07-12T20:17:00.000+05:30

Photoblogs are a popular way of expression amongst bloggers. There are numerous photo hosting sites such as photoblog.com , Animus3.com , Flickr.com,slide.com.. etc etc.. the list is endless. But there are some Bloggers out here.. who have already established themselves among their blogzone. They would rather host their Photoblog in the same platform ( blogspot / wordpress ..etc etc)..due to established readership. Moving to a mew platform like flicker,photoblog et etc would mean.. they will have to network from square one.

Its a good idea to display your photoblog pics ( as an thumbnail image preview.) in your main blog.. so that the readers will know about your new Photoblog and can also see a preview of the images whenever you make an update.

You may see one such preview in my Left-side-bar. This Showing-Image-Preview for Photoblog was developed using the Blidget option of Widgetbox.com. Just follow the instructions if you wish to have such a widget for your photoblog too.

PHASE 1:- MAKE YOUR OWN BLIDGET

Choose "Make a Blidget" ( meaning... convert your blog into a widget)

Give the URL of your photoblog -- continue

Choose the "Layout" as Narrow (for sidebars) or Wide (to show below the header.. or above all posts)

Choose the "Display" as Headlines only & ShowFirst image in each post ( oh Yeah... afterall this is a Photblog)

Its Ideal to choose "Header Style" as Title only (for photoblogs)

Just allow Listing in the Gallery and give a Description of your blog .. dont forget to add tags.. its really useful

Then Publish the blidget at Widgetbox.com

PHASE 2:- ADDING THE BLIDGET TO YOUR BLOG

They give you a variety of options as to where you want to use the blidget you have just created.Just move the mouse over the image and see which one is for what

You may direclty add your blidget using these options,,..
Or you may use the "getcode option" to get the Javascript code and then add it manually to your blog through template - page elements - new elements
Voila.. Now every one who comes to your active blog can see that You have a Photoblog and Such awesome pictures are sure to inspire them to visit your Photoblog to leave a comment

What do you say... Liked it.. C'mon.. go ahead and configure your blidget

AN APPEAL TO MY READERS

Widgetbox allows the display of english characters only.The boxes you see in my photoblog widget are Tamil (Unicode) characters. I have tried makig blidgets with blogs in other languages as well.. all come out as boxes. I have also written at the widgetbox forums ..Forum for using widgets and Forum for New features.. to allow the display Unicode characters also.

I hereby appeal to all my readers to kindly support this feature in blidget so that many Regional language Bloggers can also make use of this wonderful feature.Kindly register yourlseves with the WidgetboxForum and Give your support by replying to any one of the thread (To display Unicode Characters) Thread at Forum for Using Widgets or Thread at Forum for New Features.

This will hardly take a minute or two. Please voice your opinion on this at the forum. Your reply might get us one step closer towards the process of implimenting this feature

Thank you

Your appreciation is my motivationKindly link back to this post..of you are impressed by the information provided

Give 5-star rating for individual posts in your Blog

2007-07-11T12:01:00.000+05:30

Best way to sustain readership is to make it as interactive as possible. But at the same time we need to remind ourselves that the readers jude you posts in matter of minutes.. They scan your posts (before actually reading them) and then decide to read further. So if you can allow users to interact with your posts without any annoying popup and signup forms,.. then the 5 star rating system is something you need to incorporate

You may notice Some stars displayed at my posts.These are the Rating-stars. You may click on the stars to rate your opinion on the concerned post

- Poor
- Fair
- Average
- Good
- Best

This script has been developed and deployed by the team at http://js-kit.com.Do drop by there..I am sure other scripts developed by them will impress you equally well.However..Instructions to use the 5 star rating system in blogger is as follows

SAVE AND BACK UP YOUR TEMPLATE
In TEMPLATE-EDITHTML - check the "Expand widget templates"
Locate the <div class='post-header-line-1'/> and insert the following right after it (and before <div class='post-body'>)

So your final code should look something like this

Locate the </body> in the template and add the following before it

</body>

Your appreciation is my motivationKindly linkback to this post as you recomend this 5 star rating feature to your fiends

Lightbox code to zoom ( enlarge) pictures without moving away from your blog

2007-07-03T16:08:00.000+05:30

After receiving a request from Priya, who is very much interested in photography and wanted to have her photoblog in blogspot. But the only thing that was refraining her to do so was.. the behavior of blogger to show the enlarged version of the picture in a new window. Like many other's she too felt that this would inadvertently take here viewers away from her page.

In this quest with priya.. i landed at an excellent lightbox code at Huddletogather by Lokesh. This entire script( s) is Lokesh's work and I am putting this here to let my readers know as to how wonderful this feature is.. A must have for any photoblog.. Even otherwise..its a great way to zoom the pictures in your blog..See it in action here. Read more for instructions on how do this

SAVE AND BACK UP YOUR TEMPLATE
Add the following lines just above the </head> tag in your template
<script type="text/javascript" src="http://deepa7476.googlepages.com/prototype.js"> </script>
<script type="text/javascript" src="http://deepa7476.googlepages.com/scriptaculous.js?load=effects"> </script>
<script type="text/javascript" src="http://deepa7476.googlepages.com/lightbox.js"> </script>
<link rel="stylesheet" href="http://deepa7476.googlepages.com/lightbox.css" type="text/css" media="screen" />
You may choose any of the layout provided by blogger for uploading pictures ( Small - Medium - Large).
If you notice the html part of the image code you will see something like
<a href="url of the picture at blogger">
< img src="url of the pic..the full size" style="width - height etc depending on the layout"/>
</a>
Here is what you need to do to activate the lightbox code
<a href="url of the picture at blogger" rel="lightbox"> < img src="url">
If you wish to show the pictures as collection (...say..flowers..animals..etc etc).. then all you need to do is

<a href="url of the picture at blogger" rel="lightbox[flowers]" > < img src="url">
<a href="url of the picture at blogger" rel="lightbox[flowers]" > < img src="url">
<a href="url of the picture at blogger" rel="lightbox[flowers]" > < img src="url">

<a href="url of the picture at blogger" rel="lightbox[picnic]" > < img src="url">
<a href="url of the picture at blogger" rel="lightbox[picnic]" > < img src="url">
<a href="url of the picture at blogger" rel="lightbox[picnic]" > < img src="url">

The above step does not involve blogger labels... so no conflict on codes.
Remember that the lightbox code will get fuctional only after the entire page loads.

This code works for me and I hope this works for you too. Drop a comment and let me know

ADD ON:-
If you want to have a "Zoom Cursor" appear over your pictures as shown here.. the this is waht you need to do
LOCATE THE FOLLOWING IN YOUR TEMPLATE
And add the line shown in red.
.post img {
cursor:url(http://deepa7476.googlepages.com/ZoomIn.ani);
}
This is best viewed in IE. I dont know if FFox supports cursors in Stylesheets.

Your appreciation is my motivation

Team Blog :- Show Post-author Picture near respective posts

2007-06-18T11:16:00.001+05:30

Team blog is a great way to develop a knowledgebase. You have people from varied background and expertise contributing towards the content of the blog. I received a request from Kutchu , who manages a team blog and wanted to display the pictures of the team-members near their respective posts. I think its a great way to encourage the members of the team-blog. Below is a Screenshot of how the posts & pictures will appear in a test-team blog
SAVE AND BACK UP YOUR TEMPLATE BEFORE MAKING ANY CHANGES

Here are few things that you need to bear in mind before implementing this.

For best results.. the photos may be of the following dimentions
Width =60 px
Height=60 px
Upload the photos to some common file-sharing network like
googlepages-geocities..etc ( this is just to prevent loosing the urls)

Make a list in the notepad as to the names of the team members and urls of their photos

Team_Member 1 : URL of Photo
Team_Member 2 : URL of Photo
Team_Member 3 : URL of Photo
Team_Member 4 : URL of Photo
Team_Member 5 : URL of Photo
Team_Member 6 : URL of Photo

and save this notepad ( again as a precaution)

STEP :1 Copy the following into a notepad and make appropriate changes
<script type='text/javascript'>
var team = new Array();
team['Team_Memeber 1']='URL of the Photo';
team['Team_Memeber 2']='URL of the Photo';
team['Team_Memeber 3']='URL of the Photo';
team['Team_Memeber 4']='URL of the Photo ';
team['Team_Memeber 5']='URL of the Photo';
team['Team_Memeber 6']='URL of the Photo';

function PostAuthorPic (authorname)
{
var pic = team[authorname];
document.write("<img src='" + pic + "'/>");
}
</script>

STEP:2:- After making the changes... include the above code snippet at the position above the</head> tag

STEP:3 locate the following code in the template and make changes shown in red
<table border='0' width='100%'><tr><td>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if></td>
<td width='60px'>
<script type='text/javascript'> PostAuthorPic('<data:post.author/>'); </script>
</td></tr></table>

<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
STEP:-3 Save and view the blog in browser

If you happen to see border around the pictures & wish to remove it.. locate the following tag and change the border width to zero as shown below
post img
{ border:0px solid $bordercolor; }

If you are glad in using this hack.. and appreciate my effort.. please do link back to me..Your appreciation is my motivation

Team Blog:-Linking Post author to respective Profile

2007-06-15T14:56:00.001+05:30

If you are the only person contributing to your blog,.. then it makes sense to see that the POSTED BY <your name> is a static as a simple piece of text and does not link to any webpage. However, if the blog is a team blog ... then each post will have the post author's name displayed at the bottom of the post.. like POSTED BY <Post_author>.

By default this is also a static text and does not link anywhere. Wouldn't it be a lot more better that the profile of each author is linked not only at the contributors section , but also at the posts that he / she writes. If a certain post is liked by a reader.. he would want to know more about the author... So lets give the reader the opportunity to know-the-post-author at the click of a mouse.. without having to scroll though the long list of widgets in the sidebar in order to locate the contributor's list...Want to know how ???

Assuming that you know the profile URLs of the people contributing to your blog
STEP :- 1 A closer look at the PROFILE-URL
Example:- This is my profile URL
Deepa :- http://www.blogger.com/profile/08368941819092880320 where 08368941819092880320 is my Profile ID or the pID.
Every profile url is in this format.. so before advancing further to implement this hack.. I recommend that you prepare a list of contributors to your blog and their respective pID as shown below ..donot forget to see the Picture for reference

Team_Member ( use the name in the profile )
pID ( use pID number)

Team_Member 1 : pID
Team_Member 2 : pID
Team_Member 3 : pID
Team_Member 4 : pID
Team_Member 5 : pID
Team_Member 6 : pID

Save this notepad as a precaution

STEP:-2 Copy the following code in a (new ) Notepad... You will be editing this

<script type='text/javascript'>
var team = new Array();
team['Team_Memeber 1 ']=' pID number ';
team['Team_Memeber 2']='pID number';
team['Team_Memeber 3']='pID number';
team['Team_Memeber 4']='pID number';
team['Team_Memeber 5']='pID number';
team['Team_Memeber 6']='pID number';
NOTE:- There must not be any space between the singlequote and the name / ID characters. Orelse, this hack will not work
function makeprofilelink (authorname)
{
var pid = team[authorname];
document.write("<a href='http://www.blogger.com/profile/" + pid + "'>" + authorname + "</a>");
}
</script>

Replace the Team_Memeber names and the pID number Profile Numers.... then copy paste the code into the template just above the </head> tag

STEP:-3 Locate the following code in the template

Locate the following code in your template
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<data:post.author/>
</b:if>

Replace the <data:post.author/> with
<script type='text/javascript'> makeprofilelink('<data:post.author/>');
</script>

Now, your final Template code at this position must resemble something like this
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<script type='text/javascript'> makeprofilelink('<data:post.author/>');
</script>
</b:if>

STEP:-4
Save and view your blog.. Each post author is now automatically linked to his/her profile beneath every post.

If you are glad in using this hack.. and appreciate my effort.. please do link back to me..
Your appreciation is my motivation
The code for this at blogger help has bugs and does not work

Different Profiles for different blogs

2007-06-07T22:21:00.000+05:30

We all know about the Profile widget providedd to us by Blogger. This widget will display our name / other details that we have given in our profile and will be shown only if you have enabled the "share-my-widget" option.

Some of you might be having multiple blogs and would like a different set of details displayed for each blog in the about me section..depending on the mood of your blog... hmm.. fair enough.. you dont have to putup with the same profile contents.. if you choose not to

You can have a text / html widget instead of the profile widget and include the contents you want to be displayed.Those familiar with the standard html tags like <b>...<i> ..<u>....<font>..etc etc can use the EDIT_HTML mode to format your content to suit you blog. Others may use the RICH-TEXT mode and format using the buttons provided

Drop me a comment..if you face a roadblock in displaying the content to match your requirement.I shall try to be of help
Your appreciation is my motivation