Unable to Delete Records in Lightswitch HTML Client App

Question

I'm using Visual Studio 2012 Ultimate, Update 2.  In trying to create an HTML Client App, all seems to work fine until I try and delete an entity.  From other forum entries and Michael Washington's tutorial on building an HTML Client App, I have this code attached to a Delete Button on my Add-Edit Screen for the ModelEntity:

myapp.AddEditModelEntity.DeleteModelEntity_execute = function (screen) {
    // Write code here.
    screen.ModelEntity.deleteEntity
    return myapp.commitChanges().then(null, function fail(e) {
        alert(e.message);
        myapp.cancelChanges();
        throw e;
    });
};

 

When I press the delete button, nothing happens.  As per Michael's article, I then press the Save button.  Nothing happens.  I close the Browse screen and re-open, the item just deleted is still there.

Surely there is a way to perform the D in CRUD. Please help!

Answer 1

Hi Dave,

Since deleteEntity is a function. You need to do this to invoke it

    // Write code here.
    screen.ModelEntity.deleteEntity();

Best regards,
Huy Nguyen

Answer 2

Thanks Huy.

It's always the little things that get us!  That did the trick.

Answer 3

Hi Dave,

Since deleteEntity is a function. You need to do this to invoke it

    // Write code here.
    screen.ModelEntity.deleteEntity();

Best regards,
Huy Nguyen

Dear Huy

I'd be grateful for your advice on a similar issue.

// Do not save the Action record if the user hits the Cancel button
myapp.ViewStoreGroup.CancelNumberAnswer_execute = function (screen) {
    screen.closePopup("NumericPopUpStore");
    if (ActionCreated == "Yes") // Delete the newly created Action
    {
        screen.ActionItems.deleteEntity()
        return myapp.commitChanges().then(null, function fail(e) {
            alert(e.message);
            myapp.cancelChanges();
            throw e;
            });
        };
    }

When the above code runs I get the error: "0x800a138f - JavaScript runtime error: Unable to get property 'deleteEntity' of undefined or null reference".

Below is a screen-shot from the designer showing (1) The Entity, (2) The button in the pop-up and (3) the tap action.

Your advice will be appreciated. Thanks.

---

Mark

Answer 4

I think it is suppose to be:

screen.ActionItem.deleteEntity();

not:

screen.ActionItems.deleteEntity()

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 5

I think it is suppose to be:

screen.ActionItem.deleteEntity();

not:

screen.ActionItems.deleteEntity()

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Hi Michael

That was a hangover from me trying out all I could to track it down.

I tried ActionItems as a test and forgot to change it back to ActionItem.

But unfortunately either way it fails with the same error.

Thank for investigating though.

Best regards.

---

Mark

Answer 6

It's hard when you're not at the computer :)

Try:

screen.ActionItem.selectedItem.deleteEntity();

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 7

It's hard when you're not at the computer :)

Try:

screen.ActionItem.selectedItem.deleteEntity();

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Hi Michael

Yep, that was one of my failed attempts.

Thanks for the suggestion, but I see this when I try that:

---

Mark

Answer 8

If the Cancel button is not on the same row as the action item then there will be no "selectedItem". For an example of what I am talking about see:

Deleting Data In The Visual Studio LightSwitch HTML Client

Question: How did you get your screen look so nice? I assume you make a .css style sheet? Care to share? :) ;)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 9

Mark,

I believe the problem you are having is related to the asynchronous nature of the HTML Client.

The following or something similar might work - Hope it helps.

Dave

screen.getActionItems().then(function(AItems) {
    AItems.data.selectedItem.deleteEntity();
});	

I believe

AIems.data.deleteSelected(); 

would also work.

Answer 10

If the Cancel button is not on the same row as the action item then there will be no "selectedItem". For an example of what I am talking about see:

Deleting Data In The Visual Studio LightSwitch HTML Client

Question: How did you get your screen look so nice? I assume you make a .css style sheet? Care to share? :) ;)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Hi Michael

Thanks for the compliment about my screen.

I used themeroller to create this theme:

https://dl.dropboxusercontent.com/u/10788935/jquery-mobile-theme-222445-0.zip

I also use msls.showMessageBox rather than alerts.

Here's a screen-shot of the HTML5 client with the mouse over a tile.

https://dl.dropboxusercontent.com/u/10788935/Topic8.png

Best regards.

 

---

Mark

Answer 11

Mark,

I believe the problem you are having is related to the asynchronous nature of the HTML Client.

The following or something similar might work - Hope it helps.

Dave

screen.getActionItems().then(function(AItems) {
    AItems.data.selectedItem.deleteEntity();
});	

I believe

AIems.data.deleteSelected(); 

would also work.

Hi Dave

Many thanks for assisting.

I applied the above suggestion but I still get the below error (see the tooltip at 'screen.getActionItems()').

Your thoughts about the issue will be very much appreciated.

All the best.

---

Mark

Answer 12

...

I used themeroller to create this theme:

https://dl.dropboxusercontent.com/u/10788935/jquery-mobile-theme-222445-0.zip

I also use msls.showMessageBox rather than alerts.

Here's a screen-shot of the HTML5 client with the mouse over a tile.

https://dl.dropboxusercontent.com/u/10788935/Topic8.png

...

Wow this looks great. I am going to use it in my next tutorial (I will give you credit with a link to your website)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 13

Hi

I found this example given again by Huy where the topic initiator marked Huy's answer as the solution.

var resp = msls.showMessageBox("Really delete? Think twice..", { title: 'Wanna delete?!', buttons: msls.MessageBoxButtons.yesNo });
    resp.then(function (val) {        
        if (val == msls.MessageBoxResult.yes) {
            screen.RadniNalog.deleteEntity();
        }
    });

Here's the topic: http://social.msdn.microsoft.com/Forums/vstudio/en-US/9a7854e3-ac31-4da8-849c-b160f41189f9/message-box-in-html-client

I'm probably being a bit dense here and "screen.ActionItem.deleteEntity();" should work.

I suspect the reason is that I've just created the record and although it does in fact get saved, it's probably still in the pipe-line.

Here's the code that creates the record:

            // Get the results of the query
            var currentAction = result.results[0];
            // If an Action exists don't create a new one
            ActionCreated = "No" // Set the flag saying there is an existing Action (used to test in the Cancel Button).
            if (currentAction == null || currentAction == 'undefined') {
                // Create a new Action record
                ActionCreated = "Yes" // Set the flag saying a new Action records was created.
                screen.ActionItem.selectedItem = screen.ActionItem.addNew();

I then show the pop-up containing the Action record and have the following code for the user hitting either the OK button or the Cancel button. If the user cancels I have two cases (a) if a record already existed just do not save the record and (b) if the record has just been created then delete the Action record.

// Save Action Item on clicking OK
myapp.ViewStoreGroup.OkNumberAnswer_execute = function (screen) {
    screen.findContentItem("SameActions").isVisible = true;
    screen.closePopup("NumericPopUpStore");
    myapp.activeDataWorkspace
    .ApplicationData.saveChanges().then(function () {
        //Refresh the screen
        screen.ViewStoreGroup();
    })
};

// Do not save the Action record if the user hits the Cancel button
myapp.ViewStoreGroup.CancelNumberAnswer_execute = function (screen) {
    screen.closePopup("NumericPopUpStore");
    if (ActionCreated == "Yes") // Delete the newly created Action
    {
        screen.findContentItem("SameActions").isVisible = true;
        screen.closePopup("NumericPopUpStore");
        myapp.activeDataWorkspace
        .ApplicationData.saveChanges().then(function () {
        return myapp.commitChanges().then(null, function fail(e) {
            alert(e.message);
            myapp.cancelChanges();
            throw e;
            screen.ActionItems.selectedItem.deleteEntity()
          });
        });
    }
 }

I suspect I need to use "myapp.cancelChanges();".

I'll try that and update this topic with the outcome.

Many thanks for your support.

---

Mark

Answer 14

Hi Guys

Sorry to drag this out.

I tried doing the below but obviously the original creation of the record is in the pipeline and I don't know how to cancel the new record and I can't seem to delete it either.

Your help is greatly appreciated.

Thanks, Mark.

// Save Action Item on clicking OK
myapp.ViewStoreGroup.OkNumberAnswer_execute = function (screen) {
    screen.findContentItem("SameActions").isVisible = true;
    screen.closePopup("NumericPopUpStore");
    myapp.activeDataWorkspace
    .ApplicationData.saveChanges().then(function () {
        //Refresh the screen
        screen.findContentItem("SameActions").isVisible = true;
        screen.closePopup("NumericPopUpStore");
        myapp.activeDataWorkspace
        .ApplicationData.saveChanges().then(function () {
            //Refresh the screen
            screen.ViewStoreGroup();
            return myapp.commitChanges().then(null, function fail(e) {
                alert(e.message);
                myapp.cancelChanges();
                throw e;
            });
        });
    })
};

// Do not save the Action record if the user hits the Cancel button
myapp.ViewStoreGroup.CancelNumberAnswer_execute = function (screen) {
    screen.closePopup("NumericPopUpStore");
    if (ActionCreated == "Yes") // Delete the newly created Action
    {
        screen.findContentItem("SameActions").isVisible = true;
        screen.closePopup("NumericPopUpStore");
            myapp.cancelChanges();
    }
 }

---

Mark

Answer 15

Mark,

I believe Huy's example is for the case where screen.RadniNalog is the single subject of the screen and is available in the intellisense list of screen.  In your case, I understand you are trying to delete one of the items in a collection.

In my answer above, AItems.data refers to the array of entities in the visual collection and would not have the selectedItem  function.  Sorry for misleading you (unintentionally, of course).  This is useful for interating over the collection (array) with the $.each operator.

In the more detailed code example you provided above, is screen.ActionItem a visual collection? I assume so, from this line:

screen.ActionItem.selectedItem = screen.ActionItem.addNew();

If so, I believe simply adding the new item with addNew() will make it the selectedItem of the visual collection:

screen.ActionItem.addNew();

If your popup references ActionItem.selectedItem, it should show the newly created entity if it opens after the addNew().

Because you have not called myapp.applyChanges or myapp.commitChanges yet, the newly created item has not yet been saved, so if you want to abandon it, it does not have to be deleted, just call myapp.cancelChanges();

This should also cancel any changes the user made to an existing entity. So your cancel button code on the popup could be as simple as:

myapp.cancelChanges();

Of course, this would cancel any other changes made by the user since the last save, but it seems you are saving all changes as the user makes them anyway, so this should not be a problem.

To keep the new item or changes to the existing item, just call mapp.applyChanges();  , followed by your ....saveChanges() to move the changes to the database/persistent store.

Hope this resolves your issue.

Dave

Answer 16

...

I used themeroller to create this theme:

https://dl.dropboxusercontent.com/u/10788935/jquery-mobile-theme-222445-0.zip

I also use msls.showMessageBox rather than alerts.

Here's a screen-shot of the HTML5 client with the mouse over a tile.

https://dl.dropboxusercontent.com/u/10788935/Topic8.png

...

Wow this looks great. I am going to use it in my next tutorial (I will give you credit with a link to your website)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Hi Michael

I'm glad you like it. At present I have an "under construction" page up while my app is being finalized.

But your reference to the site will be greatly appreciated.

Over the next few days I'll put up an "early-bird" registration form on that page so interested parties can be notified when the app "SkeMaz" is available. I plan to make available for free for up to 3 additional users (plus an additional 3 as a reward for tweeting or posting to Facebook) and $4.50 per month each for additional users.

The app will be a "frame-breaker" in it's market niche and I'll be sure to send you a login as soon as it's all done.

FYI: The SL client is complete and the HTML5 client is just about there. I'm relying heavily on C1 extensions especially the calendar for scheduling, so the timing of your latest article was very fortunate for me. Thanks.

Also thanks for your post on integrating LS into ASP.net. (see this topic http://social.msdn.microsoft.com/Forums/vstudio/en-US/b81ced8f-a0c9-412a-9970-b61a3dd321c7/two-ls-html-clients-and-one-ls-sl-client-is-this-possible#e7a0db2e-9884-474c-a03a-e4a9fed4c686 That will be my 2nd last task which is to create the login page so users can go either to the SL client, HTML5 client or the HTML5 reporting client (using C1's Studio for LightSwitch) being the last task.

PS: I had previously purchased C1's FlexGrid and OLAP extensions, but it seems I still need to purchase Studio for LightSwitch to get the lot. Adam Ferraccio from C1 sent me a discount offer but I missed the expiration date of end June :-(

---

Mark

Answer 17

...

PS: I had previously purchased C1's FlexGrid and OLAP extensions, but it seems I still need to purchase Studio for LightSwitch to get the lot. Adam Ferraccio from C1 sent me a discount offer but I missed the expiration date of end June :-(

---

Mark

I wish I had more discounts but they gave me 7,000 to give to the members of my site and I gave them all out, you are a member of the site, right? :) ;)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 18

...

PS: I had previously purchased C1's FlexGrid and OLAP extensions, but it seems I still need to purchase Studio for LightSwitch to get the lot. Adam Ferraccio from C1 sent me a discount offer but I missed the expiration date of end June :-(

---

Mark

I wish I had more discounts but they gave me 7,000 to give to the members of my site and I gave them all out, you are a member of the site, right? :) ;)

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Hi Michael

Yes I've been a member for quite a while. Don't know how I missed your offer :-/

Thanks anyway, Mark.

---

Mark

Answer 19

Mark,

I believe Huy's example is for the case where screen.RadniNalog is the single subject of the screen and is available in the intellisense list of screen.  In your case, I understand you are trying to delete one of the items in a collection.

In my answer above, AItems.data refers to the array of entities in the visual collection and would not have the selectedItem  function.  Sorry for misleading you (unintentionally, of course).  This is useful for interating over the collection (array) with the $.each operator.

In the more detailed code example you provided above, is screen.ActionItem a visual collection? I assume so, from this line:

screen.ActionItem.selectedItem = screen.ActionItem.addNew();

If so, I believe simply adding the new item with addNew() will make it the selectedItem of the visual collection:

screen.ActionItem.addNew();

If your popup references ActionItem.selectedItem, it should show the newly created entity if it opens after the addNew().

Because you have not called myapp.applyChanges or myapp.commitChanges yet, the newly created item has not yet been saved, so if you want to abandon it, it does not have to be deleted, just call myapp.cancelChanges();

This should also cancel any changes the user made to an existing entity. So your cancel button code on the popup could be as simple as:

myapp.cancelChanges();

Of course, this would cancel any other changes made by the user since the last save, but it seems you are saving all changes as the user makes them anyway, so this should not be a problem.

To keep the new item or changes to the existing item, just call mapp.applyChanges();  , followed by your ....saveChanges() to move the changes to the database/persistent store.

Hope this resolves your issue.

Dave

Hi Dave

I very much appreciate the time you have spent assisting me.

In reply to "is screen.ActionItem a visual collection?" Yes it is.

Also, tried  calling mapp.applyChanges();  (see screen-shot below) but it stubbornly refuses to go away.

I'm going to mark your answer above as answered (because I'm pretty sure my issue is caused by the fact that I've already saved the record).

So what I'll do in my app is to have just the OK button with no option to cancel but if they tap the item again I'll give them the option to either change their response or delete it. I was going to have to let them delete a response anyway so it's not a bad solution.

Thanks again for all your time assisting me.

Regards.

---

Mark

Answer 20

....

Yes I've been a member for quite a while. Don't know how I missed your offer :-/

Thanks anyway, Mark.

---

Mark

Darn probably went to your Spam folder :(

Here is the link to the article where I used your theme: How To Perform Angular.Js Functionality Using Visual Studio LightSwitch HTML Client.

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 21

....

Yes I've been a member for quite a while. Don't know how I missed your offer :-/

Thanks anyway, Mark.

---

Mark

Darn probably went to your Spam folder :(

Here is the link to the article where I used your theme: How To Perform Angular.Js Functionality Using Visual Studio LightSwitch HTML Client.

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Many thanks Michael.

Just a small typo the name is "ITPSB" not "ITPSP".

Having read your article, I just bought: 'Recipes with Angular.js' by Frederik Dietz so I can learn more about it. Thanks for the excellent advice.

Regards, Mark.

---

Mark

Answer 22

....

Just a small typo the name is "ITPSB" not "ITPSP".

...

Fixed.

Sorry about that :(

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com