I am helping a local community develop a website on which they want to list the projects they intend to work on. So I created a content type for projects and have a project lead field.
Now I would like to add a progress bar for the project. In other words, the project lead can edit the page and put a number e.g. 25, and that would represent a 25% progress on the project.
Is there a way I can add a field to the project's content type and some php code that will display the desired bar? I found the following decent php code, but have now idea how to use it like I am describing.
http://www.bhsdesign.com/page.php?id=491
I am new to drupal, have experience in programming but nothing much to web design or php so hopefully, you have an easy solution for me.
Thanks
Comments
Quick and Dirty - Use .tpl and CSS
If you just want a basic bar and a simple solution, you could do this via .tpl and a little CSS.
If you haven't already, create a .tpl file for your custom content type (i.e. "node-project.tpl.php" where project is the programmatic name of your custom content type)
Within that .tpl file, write PHP that inspects the progress field value and then just add a little style code. Normally I do NOT suggest using in-line styles, but since you can't really program CSS this is the only way to do it. Also, I would limit the in-line style only to control the width and no other attributes (color, etc.)
Snippet for node-project.tpl.php:
<?php$style = 'display: none;';
$progress = $node->field_progress[0]['value'];
if( is_numeric($progress) && $progress > 0 and $progress <= 100 ) {
$style = "width: ".round($progress)."%; display: block";
}
?>
<div id="progress-wrapper">
<div id="progress-value" style="<?php print $style; ?>"> </div>
</div>
Snippet for CSS:
#progress-wrapper {border: 1px solid #000000;
background-color: transparent;
width: 100px;
height: 20px;
}
#progress-value {
background-color: #acacac;
}
Obviously you'll need to make some adjustments but this technique should work in a general sense. I'm sure there are fancy modules and libraries for doing graphing, but if you have a simple problem use a simple solution.
---------------------------------
Steven Wright
Drupal Developer in Washington, DC
http://www.enterana.com
Where should I put the tpl.php and the css files
Thanks for the quick response. Simple is exactly what I am looking for.
Where should I put the files. Shall I make a module directory under sites/all/modules or is there another place?
Check other documentation
Creating TPL and CSS files is well documented, just poke around the drupal.org website.
In a nutshell:
1) create and edit "node-project.tpl.php" in your theme's root folder (example: sites/all/themes/mytheme)
2) your theme likely has a "style.css" file already, just modify that as desired
3) Go to Admin > Site Configuration > Performance and click the "Clear Cache" button near the bottom. This tells Drupal to find your new .tpl file
---------------------------------
Steven Wright
Drupal Developer in Washington, DC
http://www.enterana.com
I am stuck again
What you gave me worked really nicely. But then I started playing some more. Rather than displaying the bar in addition to the field value itself I have created a content-field-field_project_progress.tpl.php file and added the code to it. Now in the content page the bar is displayed instead of the number. Which is exactly what I want.
Next step, and this is where I am getting stuck, I am trying to have that bar get displayed in the projects view where I am only listing all the projects by title and progress. Initially, only the numeric value of progress is being displayed rather than the bar. After much searching, and I must say the documentation is very hard to find, I was able to create the file
views-view-field--Projects--field-project-progress-value.tpl.php
which controls the way the field is being displayed and now I have the bar. The problem is it has only one color regardless of the progress value. Here is what I have in that file, do you see anything wrong.
<?php$output = "width: ".round(0)."%; display: block";
$progress = $row->{$field->field-project-progress};
if( is_numeric($progress) && $progress > 0 and $progress <= 100 ) {
$output = "width: ".round($progress)."%; display: block";
}
?>
<div id="progress-wrapper">
<div id="progress-value" style="<?php print $output; ?>"> </div>
</div>
I am guessing it is in the way I am getting the value of the field.
Thanks
Include CSS
Can you include the relevant CSS code you are using? That's where the color is defined.
Also, it can be helpful if you take a screenshot, or also include the output HTML from your view.
---------------------------------
Steven Wright
Drupal Developer in Washington, DC
http://www.enterana.com
I think I am not getting the
I think I am not getting the right value for the view as depending on the random trials, either I would get a green bar (which should happen if 100%) or I get the red bar (which should happen for 0%).
#progress-wrapper {border: 1px solid #000000;
background-color: #ff0000;
width: 100px;
height: 12px;
}
#progress-value {
background-color: #00ff00;
height: 12px;
}
I am not sure how to attach an image, there is no attachment in the form. But I added a portion of the html source code. I have also included the source code from the project content page which is correct.
Incorrect code from the views page showing to projects
<tr class="odd">
<td class="views-field views-field-title">
<a href="/?q=content/website-overhaul">Website Overhaul</a> </td>
<td class="views-field views-field-field-project-progress-value">
<div id="progress-wrapper">
<div id="progress-value" style="width: 0%; display: block"> </div>
</div>
</td>
</tr>
<tr class="even">
<td class="views-field views-field-title">
<a href="/?q=content/work-university-science-fair-staff">Work with the University Science Fair staff</a> </td>
<td class="views-field views-field-field-project-progress-value">
<div id="progress-wrapper">
<div id="progress-value" style="width: 0%; display: block"> </div>
</div>
</td>
</tr>
Correct code from the content page.
<div class="field field-type-text field-field-project-progress">
<div class="field-label">Project Progress: </div>
<div class="field-items">
<div class="field-item even">
</div>
<div id="progress-wrapper">
<div id="progress-value" style="width: 30%; display: block"> </div>
</div>
</div>
</div>
Problem solved
Ok who knew that when in the comments in the file template they say
$field->field_alias
They mean literally use field_alias. I thought that I needed to put the field name in there. Which didn't work. Now everything works exactly the way I wanted.
Thanks for getting me on the path to get this done.
Good Case Study
I'm glad it worked out for you!
I decided that this topic would make a good blog entry, so I've converted our discussion here to a how-to on my website.
http://www.enterana.com/blog/web-development/simple-progress-bar-css
---------------------------------
Steven Wright
Drupal Developer in Washington, DC
http://www.enterana.com
looks good
I checked out the link. Looks really nice. I will try to use your soft color idea as well.
Adding the additional parts about modifying the field file to modify the way the field is displayed as well as the modification for the views field may be also worth it for new users like me. I know it took me a while to figure the right file names to use.
inputting the percentage
I am just starting out in Drupal, so this could just be a sign of my naivety. I think that I have all the code in place including the project content type, the node-project.tpl.php and the css snippets in the style.css of my theme. The problem that I am coming up against though is that I can not find the text field where I can input the progress percentage in the project content type. Do I need to also create a new field that connects with the php in node-project.tpl.php?
You need to add that field
In the content type you are using you need to add a text field. Then when you create the page you will be able to enter a number and use it as the progress.