Hi All,
I am very new to outsystems. I want to animate a pin icon on map from one place to other place. How can I achieve this using outsystems. I did not find a way to do following:
I have tried to place 2 widgets in the same top and same left. When I try adding the second widget it doesn't allow to drag over the first widget. I did not find any property on the container to set absolute positions for its children. I can see properties like left margin, alignment.
For animations after selecting on click of a button to client action, I did not find a way to do animation on the widget.
Check the following screen:
Please help me to how can I achieve this.
Thanks,
Pallam Madhukar.
Hi Pallam,
There are limited animations that you could do with OS. Here's a demo app that I played. I also attached the oml.
For anything advance, you can make use of css animations.
Hope this helps.
John
John Alvin Salamat wrote:
Thank you John,
It took some time to understand. but it worked for me and I understand now that how you did it. It will be very helpful if you provide some Outsystems tutorial to create advanced animations using CSS.
Thank you once again.
Pallam Madhukar wrote:
You need not to use any z-index and positioning.
In outsystems mobile, we already have one pattern which does these things.
i.e. floating content
Regards,
Pankaj Pant
Hi Pankaj Pant,
I have tried to use the floating content pattern. I have dragged the floating content pattern into a screen. Then I have dragged one image and tried another image on to it, it doesn't work. Did I miss anything here.
It will be very helpful if you can provide the sample or any tutorial to achieve something similar.
Pallam Madhukar
If drag is not working you can try something like right click>insert-wedget>select image
I have attached OML file.
Or if you can share your demo OML we can check where the problem.
With floatingContent I can add two images but I can not place one on another image. The sample oml shared by has same:
I am trying to achieve following:
Hi, Can you check with this OML?
demo link:-Link
Pankaj
Hi Pankaj,
Please, can you share OML file?
PFA
Thanks Pankaj,
It took some time to achieve same thing on new module with your refference OML. I have understood that drag and drop will not work actually. But deffently it helped me to understand. Thank you. Do we have any other ways to achieve this? I mean container with absolute positioning for its children. I am thinking CSS absolute positing for <div> tag something similer in outsystem for mobile.
Then I wanted to put my multiple pins dynamically on map. Please can you help me to identify and learn:
1. How can apply CSS on each widget/element.
2. How can I access the screen elements in javascript code snippet.
I will be very thankful if you can share tutorial videos for the same.