UI/UX Design: Edit,Update,Delete the Product

How to Edit,Update,Delete the Product block / list

Here is the scenario to Edit,Update and Delete the Product from block / list.

As per the scenario like have Admin access where we can edit the Product name, description, and Price, after editing we can save the Product as well as we can Delete the Product also.

Step - 1 - Place the Repeater on canvas , fill the column, name the repeater.

Step - 2 - Click on repeater cell, it will open in new tab window, Now need to arrange the boxes as per need, like here is the product information so Place the text-field as product name, text-area as product description, and text-field for product price. and finally place Edit and Delete Icon.

Now click on OnIteamLoad and Edit on case editor.

Step - 3 - In Case Editor -> Click to add actions -> Widgets -> Set Text

Configure actions -> Checked the Product description

In bottom click on fx.

After clicking on fx, it will open Edit Text window -> click on Insert variable/functions and select from dropdown ->Item.Product_description and click OK.

> Same step follow to set text on Product_Price, and Product_Name.

Step - 4 - Now click on Home Tab and check all data is Loaded in Repeater

Step - 5 - Now make the copy the same only change the Edit icon to check icon and name it as Edit Product_Price respectively.

Step - 6 - Now select new created copy and Group it and name it as Edit Group.

Step - 7 - First click on check icon and click on Properties Tab "OnClick" to add case,

In Case Editor window -> Click to add actions -> Repeaters -> DataSets -> Update Row

Configure actions -> Checked the Product Information (Repeater)

In bottom -> Select This (Radio btn)

-> Select Column -> Product_Name, it will display in below column and click on "fx" to add Local variable.

-> While click on "fx" it will open Edit Value -> First click on -> Add Local Variable as ->

LVR1 = text on widget = Edit Name (select from dropdown)

Then click on top text area add [[LVR1]] and click on OK

> Follow the same step to assign local variable in Product_Price,description.

Step - 8 - After click on OK in Edit Value, the window close , and Case Editor window check all values are updated in the column and click OK and close case editor.

Step - 9 - In Edit Group -> Click on cross Icon and in Properties Tab click on "OnClick" it will open case Editor .

In Case Editor -> Click to add actions -> Widgets-> Hide

Configure actions -> Checked Edit -Group and click on OK

Step - 10 - In Repeater Select close ion and in Properties Tab click on "OnClick" it will open case Editor .

In Case Editor -> Click to add actions -> Repeaters -> DataSets -> Delete Rows

Configure actions -> Checked Product Information and click on OK

Step - 11 - In Repeater click on Edit Icon and in Properties Tab click on "OnClick" it will open case editor window.

In Case Editor -> Click to add actions -> Widgets -> Show

Configure actions -> Checked Edit - group

In bottom More Option - Select Light box and click OK

Step - 12 - Edit - Group "Set Hidden"

Step - 13 - Now Preview and click on Edit button , Light box will open with Edit Group, Now Fill the Product Name, Price and Description and click on Check Icon.