scottdurow / power-drag-drop Goto Github PK

When adding an Image column to the bound columns, it should be output into the template in a data URL so that it can be used inside image tags.

Hi Scott,

If I use the input html tag in "item template" property, it's not getting rendered.
Is this a known issue / lack of implementation?
Will it be featured in a future version?

Thanks,
Nico

I'm using the following code for Item template:

<div style="
  background-color: transparent;
  padding: 2px;
  border: none;
">
  <div style="
    min-height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #D7DFF0;
    padding: 0 10px;
    border: 2px solid black;
  ">
    {{Result}}
  </div>
</div>

In PowerApps Edit/Play mode everything is ok, but after publishing and running the app directly the padding isn't working.

In Edit/Play mode:

Running the app after publishing:

Hi Scott

First of all awesome component 💪

Is it possible to have a property like AllItems so the number of items in a zone can be counted ?

Best regards
Erik

Hi Scott,

Not an issue or question - just some feedback from a user who's really impressed with this.
You might say actually you can do that to some of this, if so awesome, otherwise maybe these would be some cool ideas for you.

1 - An option to clone items from the master zone to the slave drop zone. - the way '.currentitems' works at the moment seems to imply this is not an option at the moment. Would be awesome for something like rostering where the same object might fit in many drop zones. The idea being you drag from the master to the slave zone and when you drop the item in, it clones it instead and the original stays in the master zone, ready to be used again.

2 - The ability to apply drop zone rules based on object variables - i.e maybe you have a master zone, a red slave zone and a blue slave zone, if you try drag an object with the red variable to a blue only zone, the drop zone grays out or a note comes up explaining why it won't drop there.

3 - One way drop zones - can go to slave zones but not to the master zone - I assume this maybe can be done but can't figure it out - helpful for point 1.

4 - An easier way to reference objects in specific drop zones. Say you limit a zone to only allow 1 object in it and then want to reference those related variables something like First(PowerDragDrop1.CurrentItems.colour) would be awesome - it seems now from your videos you need to trigger the drop action to write it to a different collection and then reference it from there - seems to be a bit much.

5 - For zones that only accept one item - drag and drop overwrite ability would be cool instead of having to remove the existing item first.

Again really impressed with this, I have zero expectations for anything to come from my feedback - just excited to see something like this exist. I hope Microsoft sees what you made and eventually integrates it officially :)

Hello there!

First of all, I would like to say that I think your initiative is amazing!!

Unfortunately, I've tried to import the solution for a few times but without success.

Could you pleas indicate what could I be doing wrong?

Below a print of my error.

Quick question:
How do I trigger the OnSelect property of the component? I assumed it would behave like a gallery - clicking on any item will trigger an OnSelect. But the Notify function I used in the component doesn't fire.

My publish app not render component same on studio app.

Is it possible to remove the graphic for the item being dragged to allow usage with scale to fit? the shadow that shows up in the child box when moving items around is enough on its own to justify the trade off for being able to use scale to fit.

Hello Scott!
I hope you are doing well!
I have one master zone and multiple slaves zones.
Once the item has been dragged and drop from the master to a slave, i would like to prevent the user to move the item to another slave.
I would like the user to delete the item from the slave zone, so i will go back to the master and then have the user drag and drop it to another slave zone.
Is this possible?

Thank you!

Hi Scott,
Firstly thank you for your efforts and your videos, for me and my colleagues they are really helpful.
We need to create a scheduling board for our operations sites, the power drag drop solution is really useful, but we are having problems importing the solution to any of our Power apps environments, the error message is below:

The solution file is invalid. The compressed file must contain the following files at its root: solution.xml, customizations.xml, and [Content_Types].xml. Customization files exported from previous versions of Microsoft Dynamics 365 are not supported.

We have tried on a number of environments, personal developer environments and shared development environments, we have premium subscriptions linked to out D365F&O licences.

We are downloading the zip from GitHub and importing without any manipulation. Could you advise please?
Thank you, Chris Shackleton

I'm trying to do some tests with DropZone inside a Gallery. I have placed a dropzone in the item template of the gallery and configured the items of the gallery like:

ForAll(Sequence(10),
{
Id:Text(Value+1),
Name:"Item " & Value,
Zone:"zone" & Text(Value+1),
Items:Table()
}
)

When I scroll the gallery the DropZone will reset and lose all items, I have tried to refresh it with the InputEvent without success, can you confirm if this is a limitation, or am I doing something wrong?

Before Scroll

After Scroll

Best illustrated here:

The above image is from Chrome, it is a little better in Edge:

Issue:
When I drag an item into the master zone a horizontal scrollbar appears for a moment. The scroll handle expands continuously then it disappears. What could be causing this?

Steps To Replicate:

1. Create two zones. Set the Zone IDs. Choose one to be the master.
2. Populate the master zone with a simple collection.
3. Setup the IDColumn and the ZoneColumn both zones.
4. Drag an item into the master zone. See GIF below.

Hi, I'm trying to import into a Production environment and have set the Power Apps component framework for canvas apps toggle to on. I am a system administrator role in the environment.

I get a failure:

Solution "Power Drag Drop" failed to import: Import Solution Failed: Object reference not set to an instance of an object.

Anything else I should check? I've tried all the managed solutions.

Cheers

An item that is just been dragged as the source items re-render will lose its parent - this will often show a drag item that fills the whole screen.
Also, if items are re-rendered whilst an item is being dragged then it invalidates the item and it is then orphaned from the drop-zone, leading to duplicates.

These situations only arise if items are re-rendered in the drop event, and another drop is started before the re-render can finish.

Hi Scott,
Hope you are doing well.
I'm using the drop and drag and is working perfectly. The component doesn't seem to be accessible compliant.
Do you have any tentative plan of rolling it up the accessible version for the feature too.

Hi

I found your Kanban solution at Matthew Devaney website (https://www.matthewdevaney.com/power-apps-drag-drop-kanban-tutorial/).
The data in this solution is hard-coded.
Can you please make an example where a Sharepoint list can be used as datasource.

Best Regards
Christer Russberg

Hi Scott,

The scroll bars is not visible in the iPad Power Apps App

Is it possible to control that ?

All the best
Erik

Hi Scott,

I have noticed that there is a gap between the mouse cursor and the item being dragged while dragging the item. It seems the gap the greater as the Y coordinate gots bigger as well (picking items from the bottom of the list). Is it possible to make it somehow 0?

Hello, I am having a problem similar as #16

However I do update the column that is used in custom sort, but it seems to still sort by index. I have custom sort enabled on both drop zones.

What am I missing here?

Thanks for your help.

Hi Scott,
I'm trying to recreate Planner's Kanban UI in PowerApps using your PowerDragDrop functionality, similar to the one you have as an example under README. Do you have a demo or any resources on how you built it out that you could share? I was able to create the swimlanes and drag/drop between them, but running into issues with adding functionalities like edit/delete in the individual cards.

Thank you!
Tina Bojinov

Hello,

I have a program where I want to drag tsks into timeslots with only 1 task allowed per timeslot. When I set the "Maximum Items in Zones" property to 1 or any other number it does nothing. But I tested it extensively on the Master Drop zone and there it does work.

Is there an issue or am I misunderstanding the property? It is rather odd that "Maximum Items in Zones" uses the plural "zones" instead of just "zone".

Hi Scott,

I have an existing canvas app which is enabled scale to fit. I cannot turn it off as it affects the design. Is there anyway to use this PCF with scale to fit enabled?

Thank you

Whenever I update the collection that is the item source of the gallery wherein the drag&drop zones are found, the drag&drop items are flung back to the master zone. Is this normal behaviour? And if so, how can I prevent this?

Thanks!

Hi Scott,

First of all many thanks for this component, your efforts helping the community! I loved the series on Youtube, well done!

I am trying to create an agenda functionality with the Drag and Drop PCF. I am struggeling a bit and need some directions on how to solve this challenge.

What i would like to do is create a day by day agenda for an employee. (just like outlook) depending on the duration the appointment or task it should block one or more timeslots. Could that be done?

The challenge that i am facing at this moment is i don't know how to do that. My train of thoughts, create multiple zones per timeslot and try to block them depending on the duration of the appointment. The other option would be create one zone with a set hight and work with positioning, make the hight of the appointment as a variable and use that to block a timeslot.

Does anyone have a bright idea on how to do this?

Kind regards,
Meton

Hello, a pleasure to greet you. When I want to import the solution power drag drop I get the negative that I lack the privilege prvCreateCustomControl

Is there another way to import without relying on this privilege?

I have an item template similar to the below

<div
	style="
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		display:flex;
		flex-direction: column;
		margin: 16px;
        padding: 8px;
        border-radius: 8px;
	">
	<div>{{Start Time}}</div>
</div>

The Start Time data comes from a SharePoint list Date Time field and therefore displays the date according to the ISO 8601 standard i.e. 2011-08-12T20:17:46.384Z.

How do I format this data from within the item template so that it appears as just the time portion, i.e. 20:17?

The formatting part is straightforward if I could use Power App formatting functions, however, I do not seem to be able to use those in the context of the item template and the handlebar notation.

Thanks for the help!

Hello Scott,

Thank you for your effort for creating this drag and drop PCF component. I am not posting an issue, I'm more like asking for your advice to solve this challenge. It could also be a known limitation.

I would like to use the if-else statement in the drag and drop ItemTemplate property. You have described some examples in your video tutorials such as using the {{#if}}{{/if}} function. It works for me but I'd like to build more advanced if-statements like in Power Apps.

In my case, I'm using collection as the data source and one of the columns collects different values from a choice column:

I would like to use an if statement in the ItemTemplate the following way:

If the "Progress" is "Not given", fill rectangle with gray color,
If the "Progress" is "Good", fill rectangle with green color,
... and so on. This if-statement would be 6-7 conditions long.

The current issue I'm facing is that the {{# if}}{{/if}} used in your video doesn't support comparisons to choice values or any comparisons.

An example:
background-color: {{#if ActivatorProgress =" & Progress.Good & "}}#71AC53{{else}}#F8DE1D{{/if}};

Any solutions to achieve my needs?

Best regards,
Ville

Hi Scott,

Not sure if probably an issue or I'm doing something wrong, but in the application I wrote I need to capture the currently selected Item in the power-drag-drop list. OnDrop fired successfully, but none of OnSelect, Onchange, OnAction have been fired. I have watched the videos with the Task Scheduler but I missed the scenario where the currently selected item can be catched.

Thanks in advance!
Regards:
Katzenbach

when I add this control in a component library, it becomes invisible in the screen that calls this component.
Is this control supported in component libraries?
Thanks for your help

Hi Scott,
I trust this finds you well.
Quick question: I'm using the drop and drag and is working perfectly. I'd like to add a field in my second drop zone to show the position number of the item. so far I'm capturing the position when I drag it from the master zone but how can I update that field if I then change the order in the non master zone?

This is a great component Scott. Thank-you for the time you've put into it.

When you have a chance would you be able to go into more detail on how to save the state of the drag and drop.
For instance, let's say you have a project table in dataverse that has many related tasks in a tasks table. When the project is selected in the powerapp the related tasks would show up in the master drop zone of the Kaban board. After you drag and drop / reorder the relates tasks how is that state saved back so that when a user selects the project the related tasks have the previous drag and drop state?

I will have a look at your other videos in case you addressed this anywhere else.

Thanks again for your time on this stuff it's great!

Hi Scott

When switching screens and returning back() the position of items in the lanes is reset ... how do I save the State of the different items in the lanes

All the best
Erik

This might not be possible, or would be better served as a separate PCF control, but it would be really cool if this control returned the x/y position of the currently selected element.

Setting to control vertical/horizontal layout and wrapping as shown here https://twitter.com/power_r2/status/1595547210103529475?s=20&t=bHBg3M5jt775h9BoEsYO6g

Hello Scott,
Your Power Drag and Drop is awesome! thank you so much for sharing it!
The app i made works great on the computer because i can use the mouse to scroll but on the iPad i can't scroll the dropzones. every time i try the app moves the content of the dropzones.
I already tried to set the direction to vertical, but it does not solve it.
Is there a way to make it work on the iPad too?

Thank you!

Allow items to be individual items to be configured with the target zones they are allowed to be dropped into.

Hi Scott, thank you again for your great component.
I have some issues with using action on items :
Here I am following exactly your documentation on gitHub and it is working as expected.

Here I am following the same method on different project (which is a direct application of your last youtube video).

the text label stay blank.
I tried changing the HTML itemtemplate to something else but it didn't solve anything.
Do you have any idea how to solve this issue ?

When i select an item and drag it its shadow appears far away from my mouse cursor

Hi,

I have tried to do an import in Powerapps. But that is not workning.

When a drop zone control is marked as disabled, prevent items from being dragged or dropped.

Hi Scott, really really looking forward using the DD component. Ran into a little problem. Please see screenshot.

Any hints, saw it working in your video. Maybe a language issue?

Scott, Love and appreciate all the work you have done for so many years for the community. I feel I owe you more than a few pints. I am having my first go with the drag and drop and am super excited at the potential. I am stuck however on selecting an item to edit.

I have added the button in the item template as you described and it does update the text box with different GUIDS, however it does not seem to trigger the button action.

I have the button on the screen and it does fire a Navigate() correctly using the selected GUID, but only if you select it outside the dnd container.

I am still cutting my teeth on Power Apps and would appreciate and direction you may be able to provide.

Currently action buttons do not raise the OnAction event when selected using the keyboard. This is due to the onFilter event not firing for keyboard events.

Looks like the onDrop event is messing with the sorting of the items in de target DropZone.

We were looking for this type of capability using PowerApps, in Kanban we have the concept of Variability. That is type of tasks, for e.g Urgent Issues are tagged as “Expedite’ and will have SLA’s associated to it, and based on effort we will have task type as Small, Medium, Large, Planned. These will be shown as horizontal swim lanes, will you be able to enhance the plugin to have Horizontal Plugin’s as well ?

Drag & drop is wonder full , But in some case , when woking with large list of items, a little bit annoying while moving one item at a time. I tried to change DropZoneId by ForAll , but it's not working.

Problem to change the opacity of the card ghost directly from power apps component, since power apps accepts only managed solution, it is not possible to change .css code directly from component file.
Is there possibility to change the opacity directly from power apps as attribute of the component ?

Hi @scottdurow ,

I have downloaded the unmanaged and managed solution from recent release.
https://github.com/scottdurow/power-drag-drop/releases/tag/v1.0.26.

While importing it's throwing an error. 'An Unknown error occurred'. Please assist on this.

Thank-you.