show progress circle around the icons
Question
Application Type
Mobile
Service Studio Version
11.11.7 (Build 45559)
Platform Version
11.13.0 (Build 30897)

Hi Team, 

As per requirement, I need to place a three icons(images) like, Approved, Rejected and pending.  Have to show progress circle around the icons/Images.

I have tried Components\ProgressCircle, Numbers\ProgressCircle and Numbers\ProgressCircleFraction. But i couldn't. Could you please help me with that. 

If possible can you attached sample OML.

Thanks in advance.

Regards,

Saravana

Solution

Yes

just this

And I add the image to the placeholder on the block to be more automated when dragging to the screen you already have the image and you just need to select the image you want :)


Now is everything ok, I think

ProgressCircleWithIcon.oml

mvp_badge
MVP

Hi,

can you share your oml what you tried so we can update in same.



Hi Saravana Kumar Sivaraj,

can you attach the sample image or oml of what you are trying to achieve?

Regards,

Ellakkiya.S


Hi Ellakkiya, 

Thanks for the reply. For your reference I have enclosed the image. 

Thanks,

Saravana

Newdoc08Jul202116.2411107449067444853.jpg

What I would do is, create a block, place the progress circle and a placeholder for putting the icon, then with CSS you can place the icon inside of the progress circle :)

If you want I can do a demo

Best Regards,

Márcio C.

ProgressCircleWithIcon.oml

Hi Marcio,

Thanks for your help. Its working, But Small changes that, progress bar should show outside of the circle image. 

Yes Marcio, May I know what CSS you have modified.

If possible can you update your oml for new changes.

Thanks,

Saravana

Solution

Yes

just this

And I add the image to the placeholder on the block to be more automated when dragging to the screen you already have the image and you just need to select the image you want :)


Now is everything ok, I think

ProgressCircleWithIcon.oml

I think you should start creating components for this kind of front end stuff, Mr. Champ.

Hi Saravana Kumar Sivaraj,

use the below CSS to achieve the required design

.progressbar-text {
    background-image: url(image.png);
    height: 112px;
    width: 112px;
    border-radius: 50%;
    border-color: 1px solid #fff;
}

assign the text property to empty


And if you want to place different images/icons? you will create different CSS exceptions every time you want to place different images in many progress circles?

Kind regards,

Márcio

Hi Marcio Carvalho,

I saw your approach, Great work

Yes agree with your point. In my case, need more css to be modified for multiple usecase.

It will be useful for a single usecase.

Regards,

Ellakkiya.S


 

It was just a separate thought, in order to become generic and be able to be worked and used with different contents, but good approach too :)

Best Regards,

Márcio

Hi Marcio Carvalho

 Its working as expected. Thank you for your time and help.


Regards,

Saravana




Thank you! It was a pleasure!!

Another thing, I don't know who put the negative kudos in everyone on this thread, I don't know what is the problem, if the person who put the negative kudos sees this comment, please let me know why.

Best regards,

Márcio

mvp_badge
MVP

For the person that is down voting every post of Marcio, I have the following to say: please don't use the voting systems for something else then express your  opinion about the quality of the reply. The way this is done in this thread IS NOT OK. 

For that, I have up voted every down vote, just to neutralize the unnecessary down votes.

This happened a few times now over the last couple of weeks. This is such an appropriate behavior of a community member,  for what is a great community.

I will ask OutSystems to investigate this, to ensure we can address the right person to stop with this behavior that is against the code of conduct of the OutSystems community.

mvp_badge
MVP

I too helped with the upvoting.

For the community members who are responsible for the unnecessary downvoting, as you can see the OutSystems community is large enough and righteous enough to stand up for its fellow members like Márcio who free up their valuable time to help others.

Please stop this discouraging behavior!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.