cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
JOTAPEnvz
Frequent Visitor

Can anyone help me?

I need help making an application to deliver urgently but I don't know where to start and the tutorials on youtube don't help I want to build a timer that interacts with a circle around it that shows the progress with the total time of 25 minutes in descending order with the timer starting when performing the action of clicking a button

 

WhatsApp Image 2022-10-19 at 21.38.29.jpeg

1 ACCEPTED SOLUTION

Accepted Solutions
TheRobRush
Super User
Super User

Insert an Image Control, and set it's image property to

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' stroke='rgba(246,246,250,1.0)' stroke-width='12' fill='rgba(0,0,0,0)'  />

<circle cx='50' cy='50' r='40' stroke='rgba(0,0,0,1.0)' stroke-dasharray='251' stroke-dashoffset='" & Sum(Sum(Timer1.Value)*Sum(100/1500000))*2.51 & "%' stroke-width='12' fill='rgba(0,0,0,0)'  />
</svg>"
)

 

Add a timer with a duration of

1500000

 

and a label below your Image with a Text value of

With(
    {
        seconds: RoundUp(1500-Timer1.Value/1000,1)
    },
    With(
        {
            minutes: RoundDown(seconds / 60,0),
            secondsRemaining: RoundDown(Mod(
                seconds,
                60
            ),0)
        },
        With(
            {hours: RoundDown(minutes / 60,0)},
            minutes & " minute(s) " & secondsRemaining & " second(s)"
        )
    )
)

 

This gives you a circle that fills as your timer count downs and displays time remaining like so

CountdownCapture.PNGCountdownCapture2.PNGCountdownCapture3.PNG

 

If you don't really care so much HOW it works just copy and paste all this into your app, but if you'd like to better understand what was used check out this video, I modified their method to meet your need.

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!

View solution in original post

24 REPLIES 24
TheRobRush
Super User
Super User

Insert an Image Control, and set it's image property to

"data&colon;image/svg+xml;utf8, " & EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' stroke='rgba(246,246,250,1.0)' stroke-width='12' fill='rgba(0,0,0,0)'  />

<circle cx='50' cy='50' r='40' stroke='rgba(0,0,0,1.0)' stroke-dasharray='251' stroke-dashoffset='" & Sum(Sum(Timer1.Value)*Sum(100/1500000))*2.51 & "%' stroke-width='12' fill='rgba(0,0,0,0)'  />
</svg>"
)

 

Add a timer with a duration of

1500000

 

and a label below your Image with a Text value of

With(
    {
        seconds: RoundUp(1500-Timer1.Value/1000,1)
    },
    With(
        {
            minutes: RoundDown(seconds / 60,0),
            secondsRemaining: RoundDown(Mod(
                seconds,
                60
            ),0)
        },
        With(
            {hours: RoundDown(minutes / 60,0)},
            minutes & " minute(s) " & secondsRemaining & " second(s)"
        )
    )
)

 

This gives you a circle that fills as your timer count downs and displays time remaining like so

CountdownCapture.PNGCountdownCapture2.PNGCountdownCapture3.PNG

 

If you don't really care so much HOW it works just copy and paste all this into your app, but if you'd like to better understand what was used check out this video, I modified their method to meet your need.

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!

Yes I care about how the code works, I started with the video before finding the community but I still can't understand the programming well

 

I still find it difficult to run the code even with your guidelines

Can you help me with these errors?

 

WhatsApp Image 2022-10-20 at 15.22.13.jpegWhatsApp Image 2022-10-20 at 15.24.36.jpegWhatsApp Image 2022-10-20 at 15.26.29.jpeg

 

 

TheRobRush
Super User
Super User

Judging by what I am seeing and where the error begins it seems for whatever reason your powerapps isn't recognizing 2.51 as a number and sees a break at the decimal point, does your region write decimals differently by any chance (like i know some countries 2.51 would be 2,51)

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!
TheRobRush
Super User
Super User

If you cannot figure out how to write it for your region replace the 2.51 with Sum(251/100) gives you same result

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!
TheRobRush
Super User
Super User

Basically the code just draws two circles on top of each other but offsets the starting point of one of them by your value

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!
TheRobRush
Super User
Super User

your other error in the text box display i THINK is related to you still having the commas in the formula and your regional format should be ;?

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!
JOTAPEnvz
Frequent Visitor

I managed to solve it by changing the commas by semicolons in parts of the code looking like this:

 

"data&colon;image/svg+xml;utf8, " & EncodeUrl(
    "<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
<circle cx='50' cy='50' r='40' stroke='rgba(245,246,0,1.0)' stroke-width='12' fill='rgba(0,0,0,0)'  />
<circle cx='50' cy='50' r='40' stroke='rgba(0,0,0,1.0)' stroke-dasharray='251' stroke-dashoffset='" & Sum(Sum(Timer1.Value)*Sum(100/1500000))*Sum(251/100) & "%' stroke-width='12' fill='rgba(0,0,0,0)'  />
</svg>"
)

 

But even with the timer starting the sum value remains at 0 where I think it should varyBut even with timer starting the sum value remains at 0

 

s.PNG

 

I changed the value in the timer but it still kept returning 0

 

With changes, the text label looks like this:

With(
    {
        seconds: RoundUp(1500-Timer1.Value/1000;1)
    };
    With(
        {
            minutes: RoundDown(seconds / 60;0);
            secondsRemaining: RoundDown(Mod(
                seconds;
                60
            );0)
        };
        With(
            {hours: RoundDown(minutes / 60;0)};
            minutes & " minute(s) " & secondsRemaining & " second(s)"
        )
    )
)

 

TheRobRush
Super User
Super User

If you mean when you hover over the formula in the formula bar it always shows 0 that is normal. Any time your app is not running, is in edit mode the timer will have a 0 value, see below pictures, when app is not live circled value is 0, always. but once i launch and click the timer it starts changing, circled value again (you can test the formula for yourself by taking that portion of yours and plugging it into a label like so

Sum(Sum(Timer1.Value)*Sum(100/1500000))*Sum(251/100)

this way you can see what the number is doing while it is running

CountdownCapture4.PNGCountdownCapture5.PNG

 

what is the Minutes, seconds text displaying now when you made changes, you wrote that this is what the changes look like but not what your result was

_____________________________________________________________________________________
Like my answer? - Hit that Thumbs Up. Resolved the Issue? - Hit Accept as Solution.
This helps others find solutions to future issues!

The text minutes, seconds is correct, appearing like this:

 

as.PNG

What is visible is that the image component does not change as the time decreases.

 

when connecting the label as you asked me to return these values below that do not seem quite right

d.PNG

Helpful resources

Announcements

April 2024 Community Newsletter

We're pleased to share the April Community Newsletter, where we highlight the latest news, product releases, upcoming events, and the amazing work of our outstanding Community members.   If you're new to the Community, please make sure to follow the latest News & Announcements and check out the Community on LinkedIn as well! It's the best way to stay up-to-date with all the news from across Microsoft Power Platform and beyond.    COMMUNITY HIGHLIGHTS   Check out the most active community members of the last month! These hardworking members are posting regularly, answering questions, kudos, and providing top solutions in their communities. We are so thankful for each of you--keep up the great work! If you hope to see your name here next month, follow these awesome community members to see what they do!   Power AppsPower AutomateCopilot StudioPower PagesWarrenBelzDeenujialexander2523ragavanrajanLaurensMManishSolankiMattJimisonLucas001AmikcapuanodanilostephenrobertOliverRodriguestimlAndrewJManikandanSFubarmmbr1606VishnuReddy1997theMacResolutionsVishalJhaveriVictorIvanidzejsrandhawahagrua33ikExpiscornovusFGuerrero1PowerAddictgulshankhuranaANBExpiscornovusprathyooSpongYeNived_Nambiardeeksha15795apangelesGochixgrantjenkinsvasu24Mfon   LATEST NEWS Business Applications Launch Event - On Demand In case you missed the Business Applications Launch Event, you can now catch up on all the announcements and watch the entire event on-demand inside Charles Lamanna's latest cloud blog.   This is your one stop shop for all the latest Copilot features across Power Platform and #Dynamics365, including first-hand looks at how companies such as Lenovo, Sonepar, Ford Motor Company, Omnicom and more are using these new capabilities in transformative ways. Click the image below to watch today!     Power Platform Community Conference 2024 is here! It's time to look forward to the next installment of the Power Platform Community Conference, which takes place this year on 18-20th September 2024 at the MGM Grand in Las Vegas!   Come and be inspired by Microsoft senior thought leaders and the engineers behind the #PowerPlatform, with Charles Lamanna, Sangya Singh, Ryan Cunningham, Kim Manis, Nirav Shah, Omar Aftab and Leon Welicki already confirmed to speak. You'll also be able to learn from industry experts and Microsoft MVPs who are dedicated to bridging the gap between humanity and technology. These include the likes of Lisa Crosbie, Victor Dantas, Kristine Kolodziejski, David Yack, Daniel Christian, Miguel Félix, and Mats Necker, with many more to be announced over the coming weeks.   Click here to watch our brand-new sizzle reel for #PPCC24 or click the image below to find out more about registration. See you in Vegas!     Power Up Program Announces New Video-Based Learning Hear from Principal Program Manager, Dimpi Gandhi, to discover the latest enhancements to the Microsoft #PowerUpProgram. These include a new accelerated video-based curriculum crafted with the expertise of Microsoft MVPs, Rory Neary and Charlie Phipps-Bennett. If you’d like to hear what’s coming next, click the image below to find out more!     UPCOMING EVENTS Microsoft Build - Seattle and Online - 21-23rd May 2024 Taking place on 21-23rd May 2024 both online and in Seattle, this is the perfect event to learn more about low code development, creating copilots, cloud platforms, and so much more to help you unleash the power of AI.   There's a serious wealth of talent speaking across the three days, including the likes of Satya Nadella, Amanda K. Silver, Scott Guthrie, Sarah Bird, Charles Lamanna, Miti J., Kevin Scott, Asha Sharma, Rajesh Jha, Arun Ulag, Clay Wesener, and many more.   And don't worry if you can't make it to Seattle, the event will be online and totally free to join. Click the image below to register for #MSBuild today!     European Collab Summit - Germany - 14-16th May 2024 The clock is counting down to the amazing European Collaboration Summit, which takes place in Germany May 14-16, 2024. #CollabSummit2024 is designed to provide cutting-edge insights and best practices into Power Platform, Microsoft 365, Teams, Viva, and so much more. There's a whole host of experts speakers across the three-day event, including the likes of Vesa Juvonen, Laurie Pottmeyer, Dan Holme, Mark Kashman, Dona Sarkar, Gavin Barron, Emily Mancini, Martina Grom, Ahmad Najjar, Liz Sundet, Nikki Chapple, Sara Fennah, Seb Matthews, Tobias Martin, Zoe Wilson, Fabian Williams, and many more.   Click the image below to find out more about #ECS2024 and register today!   Microsoft 365 & Power Platform Conference - Seattle - 3-7th June If you're looking to turbo boost your Power Platform skills this year, why not take a look at everything TechCon365 has to offer at the Seattle Convention Center on June 3-7, 2024.   This amazing 3-day conference (with 2 optional days of workshops) offers over 130 sessions across multiple tracks, alongside 25 workshops presented by Power Platform, Microsoft 365, Microsoft Teams, Viva, Azure, Copilot and AI experts. There's a great array of speakers, including the likes of Nirav Shah, Naomi Moneypenny, Jason Himmelstein, Heather Cook, Karuana Gatimu, Mark Kashman, Michelle Gilbert, Taiki Y., Kristi K., Nate Chamberlain, Julie Koesmarno, Daniel Glenn, Sarah Haase, Marc Windle, Amit Vasu, Joanne C Klein, Agnes Molnar, and many more.   Click the image below for more #Techcon365 intel and register today!   For more events, click the image below to visit the Microsoft Community Days website.    

Tuesday Tip | Update Your Community Profile Today!

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   We're excited to announce that updating your community profile has never been easier! Keeping your profile up to date is essential for staying connected and engaged with the community.   Check out the following Support Articles with these topics: Accessing Your Community ProfileRetrieving Your Profile URLUpdating Your Community Profile Time ZoneChanging Your Community Profile Picture (Avatar)Setting Your Date Display Preferences Click on your community link for more information: Power Apps, Power Automate, Power Pages, Copilot Studio   Thank you for being an active part of our community. Your contributions make a difference! Best Regards, The Community Management Team

Hear what's next for the Power Up Program

Hear from Principal Program Manager, Dimpi Gandhi, to discover the latest enhancements to the Microsoft #PowerUpProgram, including a new accelerated video-based curriculum crafted with the expertise of Microsoft MVPs, Rory Neary and Charlie Phipps-Bennett. If you’d like to hear what’s coming next, click the link below to sign up today! https://aka.ms/PowerUp  

Tuesday Tip: Community User Groups

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   Today's Tip: Community User Groups and YOU Being part of, starting, or leading a User Group can have many great benefits for our community members who want to learn, share, and connect with others who are interested in the Microsoft Power Platform and the low-code revolution.   When you are part of a User Group, you discover amazing connections, learn incredible things, and build your skills. Some User Groups work in the virtual space, but many meet in physical locations, meaning you have several options when it comes to building community with people who are learning and growing together!   Some of the benefits of our Community User Groups are: Network with like-minded peers and product experts, and get in front of potential employers and clients.Learn from industry experts and influencers and make your own solutions more successful.Access exclusive community space, resources, tools, and support from Microsoft.Collaborate on projects, share best practices, and empower each other. These are just a few of the reasons why our community members love their User Groups. Don't wait. Get involved with (or maybe even start) a User Group today--just follow the tips below to get started.For current or new User Group leaders, all the information you need is here: User Group Leader Get Started GuideOnce you've kicked off your User Group, find the resources you need:  Community User Group ExperienceHave questions about our Community User Groups? Let us know! We are here to help you!

Super User of the Month | Ahmed Salih

We're thrilled to announce that Ahmed Salih is our Super User of the Month for April 2024. Ahmed has been one of our most active Super Users this year--in fact, he kicked off the year in our Community with this great video reminder of why being a Super User has been so important to him!   Ahmed is the Senior Power Platform Architect at Saint Jude's Children's Research Hospital in Memphis. He's been a Super User for two seasons and is also a Microsoft MVP! He's celebrating his 3rd year being active in the Community--and he's received more than 500 kudos while authoring nearly 300 solutions. Ahmed's contributions to the Super User in Training program has been invaluable, with his most recent session with SUIT highlighting an incredible amount of best practices and tips that have helped him achieve his success.   Ahmed's infectious enthusiasm and boundless energy are a key reason why so many Community members appreciate how he brings his personality--and expertise--to every interaction. With all the solutions he provides, his willingness to help the Community learn more about Power Platform, and his sheer joy in life, we are pleased to celebrate Ahmed and all his contributions! You can find him in the Community and on LinkedIn. Congratulations, Ahmed--thank you for being a SUPER user!  

Tuesday Tip: Getting Started with Private Messages & Macros

Welcome to TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   This Week's Tip: Private Messaging & Macros in Power Apps Community   Do you want to enhance your communication in the Community and streamline your interactions? One of the best ways to do this is to ensure you are using Private Messaging--and the ever-handy macros that are available to you as a Community member!   Our Knowledge Base article about private messaging and macros is the best place to find out more. Check it out today and discover some key tips and tricks when it comes to messages and macros:   Private Messaging: Learn how to enable private messages in your community profile and ensure you’re connected with other community membersMacros Explained: Discover the convenience of macros—prewritten text snippets that save time when posting in forums or sending private messagesCreating Macros: Follow simple steps to create your own macros for efficient communication within the Power Apps CommunityUsage Guide: Understand how to apply macros in posts and private messages, enhancing your interaction with the Community For detailed instructions and more information, visit the full page in your community today:Power Apps: Enabling Private Messaging & How to Use Macros (Power Apps)Power Automate: Enabling Private Messaging & How to Use Macros (Power Automate)  Copilot Studio: Enabling Private Messaging &How to Use Macros (Copilot Studio) Power Pages: Enabling Private Messaging & How to Use Macros (Power Pages)

Top Solution Authors
Top Kudoed Authors
Users online (3,928)