Absolute layout

  

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:

  1. absolute layout and z-index
  2. animate image on button click

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


Pallam Madhukar wrote:

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:

  1. absolute layout and z-index
  2. animate image on button click

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,

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




John Alvin Salamat wrote:

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



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.

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. 


Thanks,

Pallam Madhukar  

Pallam Madhukar wrote:

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. 


Thanks,

Pallam Madhukar  

Hi Pallam,

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.


Regards,

Pankaj Pant


Hi Pankaj Pant,

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:

Thanks,

Pallam Madhukar

Pallam Madhukar wrote:

Hi Pankaj Pant,

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:

Thanks,

Pallam Madhukar


Hi, Can you check with this OML?

demo link:-Link

Regards,

Pankaj


Hi Pankaj,

Please, can you share OML file?


Thanks,

Pallam Madhukar

Pallam Madhukar wrote:

Hi Pankaj,

Please, can you share OML file?


Thanks,

Pallam Madhukar


PFA


Regards,

Pankaj

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.


Thanks,

Pallam Madhukar