How to add custom view to JSQMessagesViewController cell so that it includes one view with some buttons and text view?

Question

I am using https://github.com/jessesquires/JSQMessagesViewController/issues/1820 this library for chat application. By using this libary I am able to send images and video, but my app needs to send one view with some button and text. Like when user sends some text it will appear to others as text and button and then when somebody clicks the button one push notification will be generated. I am not able to figure it out how can I achieve this.

Here is screen shot how I want my custom view to be. It has some text user has typed and has 2 button for accept and reject.

can you show a screenshot of how you want your custom view to look ? — Shubhank, Sep 07 '16 at 14:53
https://github.com/jessesquires/JSQMessagesViewController/blob/develop/Documentation/faq.md#2-providing-your-own-cell-prototypes this has info on providing custom cell types it seems — Shubhank, Sep 08 '16 at 05:41
@Shubhank thax for this link. can u plz help me out with its point 3. — Komal Kamble, Sep 08 '16 at 08:33

score 4 · Accepted Answer · answered Sep 09 '16 at 20:22

I would suggest that you create your own custom view for this. You can use the JSQIncomingCollectionViewCell.xib or JSQOutgoingCollectionViewCell.xib as a template for your self.

Copy them from the example project and paste them into your own
Rename the files to something else like CellWithConfimationButtons
In your ChatViewController i.e. what ever you called the view that is a subclass of 'JSQMessagesViewController'. Add these two lines

self.collectionView.registerNib(UINib(nibName: "CellWithConfimationButtons", bundle: nil), forCellWithReuseIdentifier: "incomingCell") self.collectionView.registerNib(UINib(nibName: "CellWithConfimationButtons", bundle: nil), forCellWithReuseIdentifier: "outgoingCell")
Now you can add your buttons to the xib files
Add Constraints so that it lays its self out right.
Set your Images for those and then you need to make your files that support this guy. Just like JSQMessagesCollectionViewCellOutgoing.m and JSQMessagesCollectionViewCellOutgoing.h Then you need to add you IBOutlets for the buttons and add the actions and logic in that file

Then you need to set a flag or some way of determining that the message is this type of message with buttons.

Then in your collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath)

you check for that flag and get your cell

if message.flag == true let cell = collectionView.dequeableCellWithIdentifier("incomingCell")

Then set everything up.

I hope that helps. let me know if I can help more.

I am following this procedure, and it is helpfule, But There is one major issue , All Previous Cell get Replaces when I scroll — Komal Kamble, Sep 12 '16 at 05:04
I followed the steps and the Incoming Bubble just disappears. any idea? — subodh1989, Jul 21 '17 at 21:32
You would need to add your code for me to be able to make any assessment. — Dan Leonard, Jul 21 '17 at 22:41

How to add custom view to JSQMessagesViewController cell so that it includes one view with some buttons and text view?

1 Answers1

Linked