Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15596] iOS7: Support built in functionality to add "More" button(s) when user swipe to delete a cell in rows

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-03-06T21:52:34.000+0000
Affected Version/sn/a
Fix Version/s2014 Sprint 06, 2014 Sprint 06 SDK, Release 4.1.0
ComponentsiOS
LabelssupportTeam
ReporterEduardo Gomez
AssigneeVishal Duggal
Created2013-10-28T16:34:13.000+0000
Updated2015-07-07T20:51:54.000+0000

Description

Request description

Like in iOS7 Default Mail app, on swipe left the table view row will show options "More" and "Trash" which on click will prompt optional dialog to pursue the action.

Feature Request

Titanium Developers would like to request built in functionality for this custom behaviour in upcoming release since many of latest apps requires such a functionality of showing more than one button likewise. Basically need to implement the same tableview row with features similar to iOS7 mail App with 2 or 3 options on swipe left. Please find the attached image to have better idea about the request.

Attachments

FileDateSize
Archive.zip2014-03-26T20:52:29.000+00002486
Swipe_CellRows.jpg2013-10-28T16:34:13.000+000014259

Comments

  1. Malcolm Hollingsworth 2013-10-30

    This would solve a problem for me, ideally backward compatible to iOS6, but could live with iOS7 only.
  2. Sebastian Klaus 2013-11-18

    That would be awesome!
  3. Sagar GV 2013-11-20

    This is a really cool feature. Can this feature also be added to ListView? Thanks.
  4. Ingo Muschenetz 2014-02-05

    We may not implement this natively in the framework, but we will at least attempt to provide a mechanism (perhaps a module) for people to do it externally.
  5. Vishal Duggal 2014-03-26

    There is no built in functionality to add "More" buttons. What the mail app does is some clever subview manipulation in a TableViewCell. This is pretty straightforward to do in TableView since you have a direct handle to the proxy and hence the view which you can manipulate. Its a little bit difficult in ListView since ListView is a data centric API which does not give you a handle to the view so animations are impossible. However it can be approximated using the right Row Animations when updating cells. Attaching a sample project which shows a proof of concept on TableView and ListView. Customize and use as required.
  6. Danny Pham 2014-11-03

    In iOS8 there is now a method for this functionality: "editActionsForRowAtIndexPath" Can we expect a native implementation now?
  7. Ingo Muschenetz 2014-11-14

    Reopening based on the ability to do this natively in iOS 8.
  8. Sebastian Klaus 2015-02-20

    Any news on that?
  9. Rainer Schleevoigt 2015-02-27

    In this feature, I am really looking forward. Can I often use in many projects.
  10. Joseph Sachs 2015-03-02

    +1
  11. Vishal Duggal 2015-03-03

    Test Case
        function isIOS8Plus()
        {
            // add iphone specific tests
            if (Titanium.Platform.name == 'iPhone OS')
            {
                var version = Titanium.Platform.version.split(".");
                var major = parseInt(version[0],10);
                
                if (major > 7)
                {
                    return true;
                }
            }
            return false;
        }
        
        var deleteAction = {title:'Delete',style:Ti.UI.iOS.ROW_ACTION_STYLE_DESTRUCTIVE};
        var expandAction = {title:'Expand',style:Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,color:'green'};
        var collapseAction = {title:'Collapse',style:Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,color:'blue'};
        
        var cTemplate = {
            properties:{height:40,selectionStyle:Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,editActions:[deleteAction,expandAction],canEdit:true},
            childTemplates: [
                {
                    type: 'Ti.UI.Label',
                    bindId: 'itemTitle',
                    properties: {
                        font: { fontFamily:'Arial', fontSize: 15, fontWeight:'bold' },
                        left: 10,right: 10,top:5,height:30
                    },
                },
                {
                    type: 'Ti.UI.View',
                    bindId: 'sep',
                    properties: {
                        height: 1, bottom:0,backgroundColor:'black'
                    },
                }
            ]
        }
        
        var eTemplate = {
            properties:{height:70,selectionStyle:Ti.UI.iPhone.ListViewCellSelectionStyle.NONE,editActions:[deleteAction,collapseAction],canEdit:true},
            childTemplates: [
                {
                    type: 'Ti.UI.Label',
                    bindId: 'itemTitle',
                    properties: {
                        font: { fontFamily:'Arial', fontSize: 15, fontWeight:'bold' },
                        left: 10,right: 10,top:5,height:30
                    },
                },
                {
                    type: 'Ti.UI.Label',
                    bindId: 'itemDetail',
                    properties: {
                        font: { fontFamily:'Arial', fontSize: 13, fontWeight:'normal' },
                        left: 20,right: 10,top:35,height:30
                    },
                },
                {
                    type: 'Ti.UI.View',
                    bindId: 'sep',
                    properties: {
                        height: 1, bottom:0,backgroundColor:'black'
                    },
                }
            ]
        }
        
        var sec1 = Ti.UI.createListSection({headerTitle:'Numbers'})
        var sec1data = [
            {template:'simple',itemTitle:{text:'One Two'}, itemDetail:{text:'Buckle My Shoe'}},
            {template:'simple',itemTitle:{text:'Three Four'}, itemDetail:{text:'Shut The Door'}},
            {template:'simple',itemTitle:{text:'Five Six'}, itemDetail:{text:'Pick Up Sticks'}},
            {template:'simple',itemTitle:{text:'Seven Eight'}, itemDetail:{text:'Lay Them Straight'}},
            {template:'simple',itemTitle:{text:'Nine Ten'}, itemDetail:{text:'A BIG FAT HEN!!!'}},
        ]
        sec1.setItems(sec1data);
        
        var sec2 = Ti.UI.createListSection({headerTitle:'Here\'s Johnny'})
        var sec2data = [
            {template:'simple',itemTitle:{text:'Johnny Johnny'}, itemDetail:{text:'Yes Papa'}},
            {template:'simple',itemTitle:{text:'Eating Sugar'}, itemDetail:{text:'No Papa'}},
            {template:'simple',itemTitle:{text:'Telling Lies'}, itemDetail:{text:'No Papa'}},
            {template:'simple',itemTitle:{text:'Open Your Mouth'}, itemDetail:{text:'HA HA HA!!!'}},
        ]
        sec2.setItems(sec2data);
        
        var listView = Ti.UI.createListView({
            templates:{'simple':cTemplate,'detail':eTemplate},
            sections:[sec1,sec2],
            headerTitle:'Custom Row Actions',
            separatorStyle:0
        })
        
        listView.addEventListener('rowAction',function(e){
            Ti.API.info(e.action+' '+e.sectionIndex+' '+e.itemIndex)
            if(e.action == 'Expand') {
                var item = e.section.getItemAt(e.itemIndex);
                item.template = 'detail';
                e.section.updateItemAt(e.itemIndex,item,{animated:true});
            } else if(e.action == 'Collapse') {
                var item = e.section.getItemAt(e.itemIndex);
                item.template = 'simple';
                e.section.updateItemAt(e.itemIndex,item,{animated:true});
            } else if(e.action == 'Delete') {
                if(e.section.itemCount == 1) {
                    listView.deleteSectionAt(e.sectionIndex,{animated:true});
                } else {
                    e.section.deleteItemsAt(e.itemIndex,1,{animated:true});
                }
            }
        })
        
        var win = Ti.UI.createWindow({
            backgroundColor:'white',
            fullscreen:true
        });
        
        if(isIOS8Plus()) {
            win.add(listView);
        } else {
            var errorLabel = Ti.UI.createLabel({
                text:'Run this test on iOS8 and above',
                color:'red'
            }) ;
        
            win.add(errorLabel);
        }
        
        win.open();
        
  12. Vishal Duggal 2015-03-03

    Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/6684
  13. Sebastian Klaus 2015-03-04

    Is it possible to set the title of the more button? UPDATE Sorry, seen in the code now
  14. James David Low 2015-03-04

    Does this work on TableViews as well or just the ListView? Thanks, James
  15. Joseph Sachs 2015-03-04

    @James - from the pull request it seems its for a ListView only.
  16. Sebastian Klaus 2015-03-04

    Release 4.1.0? Why not 3.5.2? Or 3.6.0 maybe?
  17. Ingo Muschenetz 2015-03-04

    [~benutzername] It is a new feature, so it will only appear in a major release, not 3.5.1. 4.0 is past feature freeze, so the next release is 4.1.0. If you like, you are welcome to pull it into a custom SDK.
  18. Joseph Sachs 2015-03-04

    maybe 4.1.0 is the next release? However I would expect a 4.0.x prior to that. Sounds like this feature is a long way to be formally implemented... however we can manually update the API ourselves in our local sdk
  19. Joseph Sachs 2015-03-04

    The Example provided by [~vduggal] is sufficient & works well.
  20. Sebastian Klaus 2015-03-04

    @joseph sachs could you provide your sdk until the official release is out?
  21. Joseph Sachs 2015-03-04

    I started working on it... but then I read [~vduggal] offered a great example in Archive.zip (scroll up in description) which works nicely & "very" customizable in Ti.
  22. Sebastian Klaus 2015-03-04

    Thanks
  23. Eric Wieber 2015-07-07

    Verified fixed, using: MacOS 10.11 Studio 4.1.0.201507061821 Ti SDK 4.2.0 Appc NPM 4.1.0-1 Appc CLI 4.1.0-5 Ti CLI 4.0.1 Alloy 1.6.2 Node v0.10.37 Java 1.7.0_45 preproduction Able to create custom "more" buttons and they behave appropriately.

JSON Source