Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Gantt Chart using Google Spreadsheets and conditional formatting

Today's lesson explains how to implement a dynamic Gantt Chart using Google Spreadsheets and conditional formatting (change with rules option).

Take a look at this spreadsheet or copy this spreadsheet in your Google Apps Account

Implement the gantt chart
For explain the topic of this post I prepared a spreadsheet whit a simple work breakdown structure, with only four columns (WBS, activity, start date, finish date).

The question is: how do you do to change a date and update automatically the gantt chart?

You can think to solve the problem in this way, using a simple IF statement: for each activity, if the date's value, contained into the row 2 (in gray), is equal or grater than the activity's start date or the same date's value (row 2) is equal or less then the activity's finish date, add an "X" into the cell. Otherwise leave the cell blank. Formula for the cell C4 is:

=if(AND((E$2>=$C4),(E$2<=$D4)),"X","")

You can copy and paste this formula into the other cells.

So, if a cell satisfies the previous rule, you can use conditional formatting, to change the cell's background from the default color (white) to another color.

Click on cell background color icon and select Change with rules.



Select the following rules:

Text is exactly = X

... then, select the background color you want to apply to the cell.

How you can see in the first image, I used two color: yellow for activities and green for activities'tasks. You can repeat the previous rule changing the color from yellow to green for your tasks.

Take a look at this spreadsheet here.

Similar posts

Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template) Google Spreadsheets: formulas tutorial

Add StumbleUpon button in your Blogger's posts

Social Netoworks are a good resources to generate a costant traffic on your site. Personally I receive a good quantity of visits on this site from Digg (45% of total traffic). I already spoke about hou to add digg button in your blogger template in this post, and now I explains how to add a StumbleUpon button in each Blogger's post.

Select a button
You can select various StumbleUpon buttons like these:

<img alt="StumbleUpon" src="http://www.stumbleupon.com/images/stumble7.gif" border="0" />

<img border="0" src="http://www.stumbleupon.com/images/small_su_logo.png" alt="StumbleUpon">

How you can see, I used the first button on this site, but, if you don't like these images you can find other StumbleUpon icons here.

Add StumbleUpon code into your Blogger Template

First, save a copy of your Blogger template and after, in Modify Template switch into HTML view. Look for this code:

<p class='post-footer-line post-footer-line-3'>

... so, copy and paste the following code below the previous line of code:

<a expr:href='"http://www.stumbleupon.com/submit?url="
+data:post.url'><img alt='StumbleUpon' border='0' src='http://www.stumbleupon.com/images/stumble7.gif'/>
</a>

... and save your template.

Your StumbleUpon button is ready to work! Simple, and useful to attract more traffic on your site :)

Google Spreadsheets: formulas tutorial

After my previous post about how to implement a Project Plan and manage activities with Google Spreadsheets, I received some emails which asked to me to explain some useful formulas used frequently into spreadsheets. I published an example's spreadsheet which you can see here whith an example about these functions:

- Count If
- Vertical Look Up
- Sum If
- Count Blank

You can use these functions, with the same syntax, using Excel (remember only to use ";" to separate functions' attributes and not ",").


Download this tutorial for Excel

Take a look at Google Spreadsheet file

On-line presentation

If you want you can also take a look at this presentation:




Count If
countif() is a very useful function which you can use to count an element in an interval. In the following example I'm looking foor how many times is repeated the name "Lara" into the interval. The result is 2.

Formula is:

=countif(B13:B17,B8)

...we can "traslate" this formula in this way: count how many times the value contained in the cell B8 is repeated in the interval B13:B17.


Vertical Look Up
vlookup() is another useful function which I use frequently to manage data in a spreadsheet. You can use it to find a value (not repeated) in an interval and return a value contained ina column in the same row of the found value. In the following example I found City and Age for "Jason". The result is Dublin and 34:

Formula is:

=vlookup(F8,F13:G17,2,)

... search for the value in the cell F8 (Jason), in the interval F13:G17, and return the value contained into the interval column with index 2 (Column G).


Sum If
sumif() executes a conditional sum of values contained in an interval based on some criteria:

Formula is:

=sumif(J11:K15,J6,K11:K15)

...sum in the range J11:K11 the values contained in the column Points (interval K11:K15) where the value in the interval J11:J15 is equal to J6.


Count Blank
countblank() count how many blank (empty) cells there are in an interval:


Formula is:

=countblank(N11:N15)

Count blank cells in interval N11:N15.

I suggest you to download the spreadsheet in .xls format or take a look at the Google Spreadsheets file here.

Edit in place with Scriptaculous and PHP

Today's lesson explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP (you have to download Scriptaculous framework here).

Step 1: index.php
Create a new blank page, index.php. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The <body> will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.php and add this code into <head> tag:

<script language="javascript" src="scriptaculous/lib/prototype.js"></script>
<script language="javascript" src="scriptaculous/src/scriptaculous.js"></script>

...and add the following code into the <body> tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).


Step 2: ajax_framework.js
ajax_framework.js contains XMLHTTPRequest to use Ajax functionalities and saveText(): function, to save the new value into the database.

/* XMLHTTPRequest Enable */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

/* -------------------------- */
/* SAVE TEXT */

var nocache = 0;
var text = '';
function saveText(textId){
textId_n = encodeURI(document.getElementById('textId').value);
textIDGlobal = textId_n;
nocache = Math.random();
http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);
http.onreadystatechange = saveTextReply;
http.send(null);
}
function saveTextReply(){
if(http.readyState == 4){
var response = http.responseText;
document.getElementById(textIDGlobal).innerHTML = response;
}

Step 3: save_text.php
save_text.php contains PHP code to save the new value into our database's table (MYTABLE). Copy and paste the following code into the page save_text.php:

<!-- Include Database connections info. -->
<?php include('config.php'); ?>
<?php
if(isset($_GET['newText'])){
$newText= $_GET['newText'];
$insertText_sql = 'INSERT INTO MYTABLE (newText) VALUES('. $newText .')';
$insertText= mysql_query($insertText_sql) or die(mysql_error());
echo $newText;
} else {
echo 'Error! Please fill all fileds!';
}
?>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Gantt Chart with EditGrid online spreadsheets

Today I tried EditGrid to implement a simple Gantt Chart. EditGrid is a free and very powerful on-line application, which you can use to create and manage your spreadsheets.

I found immediatly a clear interface, simple and more similar then Google Spreadsheets to Excel and, moreover, I found a more fast and better response then Google Spreadsheets during the use and a full and more complete control for cells' formatting (border, background, number format...).

Take a look at the spreadsheet

My Gantt chart is a simple list of activities with a start date and a finish date.


Activity's Start Date is calculated like the minimum value of all Start Dates of tasks that compose it.

=min(C6:C9)

Activity's Finish Date is calculated like the maximum value of all Finish Dates of tasks that compose it.

=max(D6:D9)

Task's Duration is calculated using datediff() function:

=datedif(C7,D7,"d")

Unfortunately what it lacks is conditional fromatting to apply to cells (present in Google Spreadsheets), so you have to rapresent the Gantt Chart manually.

In general, I think EditGrid has many points to its favor respect its more famous adversary in terms of usability and funcionalities and it can be a real alternative to Excel more than Google Spreadseets.

Related Posts

Project Management: organize a project plan
Implement a Project Plan and manage activities with Google Spreadsheets
Project Management: a project plan with Excel (template)

Simple newsletter system using Coldfusion

If you have a website it can be useful to mantain contacts with your users and send periodically some news from your site. Image you have a database with a table USER and some fileds like name and email. This lesson explains how to implement a simple newsletter system using Coldfusion and <cfmail> tag.

Download Tutorial


Step 1: Add form fields
Create a coldfusion blank page and add the following code to the new page:

<form name="insert" id="insert" method="post" action="newsletter.cfm">
<input name="mailObject" type="text" id="title" size="60">
<textarea name="mailText" cols="60" rows="10" wrap="soft" ></textarea>
<input name="submit" type="submit" value="Submit">
</form>

This code adds a field to insert the object and a textarea to insert the text for your message.

Step 2: Coldfusion code to send the message to all users
Add the following code before the <form> tag seen in the previous step:

<cfif isDefined('FORM.submit')>
<!---Set error = 1 if object field and text field are empty--->
<cfif FORM.mailObject EQ ' ' OR FORM.mailText EQ ' '>
<cfset error = 1>
<cfelse>
<cfquery name="getEmail" datasource="myDatasource">
SELECT *
FROM USER
</cfquery>
<!---If error is not = 1, send the message to all users --->
<cfloop query="getEmail">
<cfmail
to="#getEmail.email#"
from="myemail@mysite.com"
subject="#FORM.mailObject#"
replyto="myemail@mysite.com">

Hello #getEmail.name#,

#FORM.mailText#

*********************

Add other infos here like site address, email to contact you...

</cfmail>
</cfloop>
<!---Set error = 0 if object field and text field are not empty--->
<cfset error = 0>
</cfif>
</cfif>

When you submit the form in the step 1, the code execute a query which gets all email address and names of the users stored in your database and execute a loop to send, to each of them, your message. Remember, you have to change datasource name with your datasource name and <cfmail> parameters from nad replyto with your email address.