TeamDesk Knowledge Base & Support

   Home      FAQ      Forum      Idea Exchange      Ask a Question      My Stuff      Help   
  
How to Add a Progress Bar
Hi All

If you are not aware this is easy to implement solution for a basic progress bar and looks good (imo) with the new UI.

You need a Formula XHTML column where the [Progress%] is a numeric value representing the scale of progress. I used a simply numeric formula column for [Progress%] where a Status value represents a value e.g. "Assigned"=10 through to "Completed = 100.

<progress value="<%=[Progress%]%>" max="100" style="width: 100px; height: 10px; border: 1px solid #eee; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none;"></progress>

You then need to add the following to the dbstyles-V3.css file in Resources to style the bar

/* Style the background of the progress bar (uncompleted section) */
progress::-webkit-progress-bar {
background-color: #d3d3d3; /* Light Gray */
border-radius: 15px;
}

/* Style the completed section of the progress bar */
progress::-webkit-progress-value {
background-color: #2897b7; /* Green/Blue */
border-radius: 15px;
}

Hope it helps!
Scott


ID
2039
Category
Customization
Author

Scott Miller
Date Created
3/9/2024 8:07:55 AM
Date Updated
3/11/2024 7:43:18 AM
Comments
basenine 3/9/2024 9:40:48 AM
👍👍
Brilliant
Pierre 3/10/2024 10:34:37 AM
Hello Scott

Thanks a lot for sharing this - it does help me a lot

Furthermore, I noticed on the image you provided the "recent comments" field, which seems to be foldable
It this is the case, would you be so kind enough to explain how you do this ?

Kind regards,
Pierre
Scott Miller 3/11/2024 7:43:18 AM
Hi Pierre

Sure its using the 'details' tag in the XHTML column......https://www.w3schools.com/tags/tag_details.asp

It's not ideal as the screen jumps around in a View when you open the details so hoping to fix this. Here is the code in the app

<details id="mostRecentComments">
<summary style="cursor: pointer; font-family: Tahoma,Geneva,Sans-Serif">Recent Comments</summary>
<div style="margin-top: 10px; display: flex; justify-content: space-between;"></div>
<font color="#2897b7"><%=[Most Recent Comment Date & User 1]%></font>
<font color="#339900"><%=[Most Recent Comment 1]%></font>
<br />
<font color="#2897b7"><%=[Most Recent Comment Date & User 2]%></font>
<font color="#339900"><%=[Most Recent Comment 2]%></font>
<br />
<font color="#2897b7"><%=[Most Recent Comment Date & User 3]%></font>
<font color="#339900"><%=[Most Recent Comment 3]%></font>
<br />
<font color="#2897b7"><%=[Most Recent Comment Date & User 4]%></font>
<font color="#339900"><%=[Most Recent Comment 4]%></font>
</details>


Feedback
Back to Search Results