Hello.
Do you how can I move (drag and drop) a Push Button widget from one Content to another in mapp View?
I’m trying to drag a Push Button widget from one container to another in mapp View, but I get an error and the action fails.
Are there any restrictions when moving widgets between different Content containers?
Is there a recommended way to do this without losing properties or breaking the structure?
Thanks
Hi @novi
maybe a little bit more background info of what you are trying to accomplish would be nice. At the moment the compiler error looks like a simple configuration mistake.
I did create a drag and drop sample the way I understood from your question but you have to understand that drag and drop is really moving the object itself into a new spot. The place you are dropping the button into already needs to contain the button and you are just making it visible while you make the original button in your navigation content invisible.
GroupBox1 is on my navigation content with a button that’s draggable.
GroupBox7 is on a different content with a copy of the same button.
You can see the name of the button changing after it’s dropped even if the dragged objects maintains the name of the dragged.
Here is the example EventBinding for the main content and the button in GroupBox7
The reverse works the same way, setting the visibility = true OnDrop while making it invisible after the dragging has completed.
Hi Marcel.
Thanks for replay, I would like to have a bar where I could select the most used navigation accesses and drag them to a shortcuts bar, where I can choose my most frequently used accesses and/or change them if needed—basically, to have a shortcuts bar.
@novi
it’s definitely possible and in my opinion pretty straight forward but maybe not the most efficient.
What you see below I put together in about 90 min and it’s by no means complete but a pretty solid starter implementation. The core thought is that each favorite spot contains all option buttons and depending on which option button is dropped into the GroupBox that button is then set visible. The GroupBox with 9 option buttons is then simply copied.
The ImageList is assigned to a session variable which is set to a value by the option button, the “same button” in each GroupBox is doing the same.
If I would to implement this for myself I would most likely create a compound widget to use for each of the Favorites groups.
For reference here are the two main parts for this sample.
<?xml version="1.0" encoding="utf-8"?>
<Content id="Favorites" height="840" width="120" xmlns="http://www.br-automation.com/iat2015/contentDefinition/v2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<Widgets>
<Widget xsi:type="widgets.brease.GroupBox" id="GroupBox1" top="0" left="0" width="120" height="660" zIndex="0" text="Favorites">
<Widgets>
<Widget xsi:type="widgets.brease.GroupBox" id="GroupBox2" top="0" left="0" width="120" height="120" zIndex="0" borderWidth="1px" cornerRadius="8px" margin="0px 0px 0px 0px" style="transparent">
<Widgets>
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_1" top="0" left="0" width="110" height="110" zIndex="0" text="Option 1" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_2" top="0" left="0" width="110" height="110" zIndex="1" text="Option 2" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_3" top="0" left="0" width="110" height="110" zIndex="2" text="Option 3" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_4" top="0" left="0" width="110" height="110" zIndex="3" text="Option 4" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_5" top="0" left="0" width="110" height="110" zIndex="4" text="Option 5" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_6" top="0" left="0" width="110" height="110" zIndex="5" text="Option 6" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_7" top="0" left="0" width="110" height="110" zIndex="6" text="Option 7" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_8" top="0" left="0" width="110" height="110" zIndex="7" text="Option 8" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_1_9" top="0" left="0" width="110" height="110" zIndex="8" text="Option 9" margin="5px" visible="false" />
</Widgets>
</Widget>
<Widget xsi:type="widgets.brease.GroupBox" id="GroupBox3" top="123" left="0" width="120" height="120" zIndex="1" borderWidth="1px" cornerRadius="8px" margin="0px 0px 0px 0px" style="transparent">
<Widgets>
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_1" top="0" left="0" width="110" height="110" zIndex="0" text="Option 1" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_2" top="0" left="0" width="110" height="110" zIndex="1" text="Option 2" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_3" top="0" left="0" width="110" height="110" zIndex="2" text="Option 3" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_4" top="0" left="0" width="110" height="110" zIndex="3" text="Option 4" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_5" top="0" left="0" width="110" height="110" zIndex="4" text="Option 5" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_6" top="0" left="0" width="110" height="110" zIndex="5" text="Option 6" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_7" top="0" left="0" width="110" height="110" zIndex="6" text="Option 7" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_8" top="0" left="0" width="110" height="110" zIndex="7" text="Option 8" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_2_9" top="0" left="0" width="110" height="110" zIndex="8" text="Option 9" margin="5px" visible="false" />
</Widgets>
</Widget>
<Widget xsi:type="widgets.brease.GroupBox" id="GroupBox4" top="248" left="0" width="120" height="120" zIndex="2" borderWidth="1px" cornerRadius="8px" margin="0px 0px 0px 0px" style="transparent">
<Widgets>
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_1" top="0" left="0" width="110" height="110" zIndex="0" text="Option 1" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_2" top="0" left="0" width="110" height="110" zIndex="1" text="Option 2" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_3" top="0" left="0" width="110" height="110" zIndex="2" text="Option 3" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_4" top="0" left="0" width="110" height="110" zIndex="3" text="Option 4" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_5" top="0" left="0" width="110" height="110" zIndex="4" text="Option 5" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_6" top="0" left="0" width="110" height="110" zIndex="5" text="Option 6" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_7" top="0" left="0" width="110" height="110" zIndex="6" text="Option 7" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_8" top="0" left="0" width="110" height="110" zIndex="7" text="Option 8" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_3_9" top="0" left="0" width="110" height="110" zIndex="8" text="Option 9" margin="5px" visible="false" />
</Widgets>
</Widget>
<Widget xsi:type="widgets.brease.GroupBox" id="GroupBox5" top="373" left="0" width="120" height="120" zIndex="3" borderWidth="1px" cornerRadius="8px" margin="0px 0px 0px 0px" style="transparent">
<Widgets>
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_1" top="0" left="0" width="110" height="110" zIndex="0" text="Option 1" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_2" top="0" left="0" width="110" height="110" zIndex="1" text="Option 2" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_3" top="0" left="0" width="110" height="110" zIndex="2" text="Option 3" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_4" top="0" left="0" width="110" height="110" zIndex="3" text="Option 4" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_5" top="0" left="0" width="110" height="110" zIndex="4" text="Option 5" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_6" top="0" left="0" width="110" height="110" zIndex="5" text="Option 6" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_7" top="0" left="0" width="110" height="110" zIndex="6" text="Option 7" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_8" top="0" left="0" width="110" height="110" zIndex="7" text="Option 8" margin="5px" visible="false" />
<Widget xsi:type="widgets.brease.PushButton" id="Option_4_9" top="0" left="0" width="110" height="110" zIndex="8" text="Option 9" margin="5px" visible="false" />
</Widgets>
</Widget>
<Widget xsi:type="widgets.brease.PushButton" id="ClearFavs" top="498" left="-1" width="110" height="110" zIndex="4" multiLine="true" text="Clear Favorites" wordWrap="true" margin="5px" style="Command" />
</Widgets>
</Widget>
</Widgets>
</Content>
I reached the character limit for the EventBinding code 
so here is the EventBinding for the Favorites content as zip
FavoritesEventsBinding.zip (1.3 KB)
Hi Marcel, thank you for your support. I think I didn’t phrase the question correctly. I have two containers:
The solution you proposed only I 've been able to used within the same content (page). Is there any method to be able to drag and drop between different contents (pages)?
I appreciate your support since this is my first project with MappView.
Noe, what I’m sharing also works between two different contents because that’s how I understood your request.
The navigation content is used on different pages and once configured with your favorites it’s going to stay like it until modified.
Below you see a 4 area page layout and the image list index is bound to the session variable either the Page 0 option buttons are writing to or the buttons from the Favorites content.
All interaction is content based so really has nothing to do with the pages. The unfortunate thing with this solution is that the you have to create the actions for each button that can be a favorite twice.
First in your Main content and again for each possible instance in your Navigation content. I can try cleaning up my sandbox project and share it.
Here is the project I have been using for the sample implementation.
DragNDrop.zip (306.4 KB)
I added another “feature” for Option 8. When Option 8 is clicked the page changes to the currently inactive one so just a basic page toggle.
I hope this helps you understand what I’m doing. Just reach out if you have more questions!
Hi Marcel.
Your solution worked perfectly for me, thank you very much for your support!
Regards.