Increase number value of column in gallery catalog with buttons (onSelect)

[ultrAslan]

Hello Community,

I am currently tinkering with a canvas app for a storage system.
So far I'm making good progress, but I'm stuck at one point.

Let me try to illustrate this:

I have a BrowseScreen (for Gallery Catalog) and an EditScreen (using an EditForm1).

In the BrowseScreen I display the dataset of a sharepoint list in the Gallery Catalog. Here I have a Amount column that has a numeric value. For example 4, for example 6.

What I am trying to do now is to change this value individually in a popup window via plus or minus or to change it by a free text entry. The popup window itself appears by OnSelect of a button ("ChangeAmountButton"), and within this (PopUp) Group I have integrated an EditForm2, which shows me only the Amount column with the numerical value.

What I fail at is the following:

I do manage to display the current value in the sharepoint list with the "Default" property (and that is: DataCardValueX, where this DatacardValue is from the EditScreen EditForm1),
but how and where do I have to set the OnSelect on the "+" and "-" buttons, so that this value changes on each click/select
and can be submitted later? For OnSelect I could set something like "DatacardValueX + 1" but
what makes it difficult is that I need the Default property to get the value in the datasource but I also need it to connect it with the "OnSelect" codes of the + / - buttons...

Any ideas?

Thank you very much!

[SebS · Accepted solution]

@ultrAslan 

Is this what You are looking for?

[ultrAslan]

Wow, exactly - can you share how you solve this please? 🙂
Thank you in advance!!!

[SebS]

@ultrAslan 

yes sure give me  like 10 min it will be long post 😉

[LaurensM · Accepted solution]

@ultrAslan I don't really understand the need for a second edit form with only 1 field.

What I would propose is to replace the amount edit form (only 1 data card) with a regular Text input.
The main calculations within the pop-up will be done with a variable and the amount will only be updated in the data source after clicking confirm.

(1) A user clicks on Change Amount

//1 This is needed to reference Gallery.Selected later on
Select(Parent);

//2 set varPopUp to true
UpdateContext({varPopUp: true});

//3 Save the current amount in a local variable
UpdateContext({varAmount: Gallery.Selected.Amount})

(2) The Default of the text input (instead of the datacard) will be varAmount

(3) The OnChange of the text input will have the following code:

UpdateContext({varAmount: Value(Self.Text)})

 
(4) The OnSelect of your add / minus button will be:

//add button
UpdateContext({varAmount, varAmount + 1})

//minus button
UpdateContext({varAmount, varAmount - 1})

 
(5.a) Patch datasource when the confirm button is clicked

Patch(DataSource, Gallery.Selected, {Amount: varAmount})

(5.b) Reset varAmount when clicking Cancel

UpdateContext({varAmount: Blank()})

You might need to tweak a few things to your specific case/app.
I hope this helps!

If I answered your question, would you be so kind as to accept it as a solution.

[SebS · Accepted solution]

@ultrAslan 

There will be a lot of changes and you will need to remove whole Pop Up box.

We need to start from your button in the gallery You need to modify it make sure the Amount is name of Your SharePoint column if not change ThisItem.'NameOfTheAmountColumn'

UpdateContext({varAmount: ThisItem.Amount});UpdateContext({PopUp:true})

You creating a variable called varAmount and Variable PopUp <-- this will control the popup box

To do this we will not use any form delate whole thing and start from schrach to make it easy to explain

Create a container and place all Items in it as on Screen below

We start From TextInput add this control

and Place the code

varAmount

Done ! 😉 joking

Now + and - buttons

First Minus code below will substract and prevent to go below 0

If(varAmount = 0,Notify("Amount cant be les then Zero"),UpdateContext({varAmount:varAmount-1}))

Next Plus button that will just increment

UpdateContext({varAmount:varAmount+1})

And Confirm button now

Replace

TestApp = Your Sharepoint List

Gallery1.Selected.ID = Gallery1 replace with Name of Your  Gallery

TextInput2 = name of Your control

Patch(TestApp,
{ID:Gallery1.Selected.ID},

{

    Amount:Value(TextInput2.Text)
}
);
UpdateContext({PopUp:false})

Cancel button

UpdateContext({PopUp:false})

You should have something like that now

make it pritty like before 🙂

and in the Container Visible property place

PopUp

Let me know if something go wrongin case of error make a screen and write the error to allow me to help find what cause it

[LaurensM]

Haha I see my solution took quite some time to type out.
I did not see that you wanted to answer this @SebS 😁

[SebS]

Heheh 🙂 Sorry @LaurensM 

Your solution is also Pretty 🙂

[ultrAslan]

Thank you too!!!