[Resolved] Customizing the Toolset Messaging module

[Author]

Posts

[RensV5812]

Hi guys,

Here's an interesting one. I am trying to change the Toolset messaging system in a way that I have one page that displays all messages as 'chats' in a sidebar. Then when you click on any of these in the main div there's a view of this chat with a post form to add new content (a new message) to this chat. What I need help with is to connect the different views and post form to each other, or if there is a smarter way then I'll be interested to hear it. The attached image shows how far I've come.

The chats portion displays the latest message per conversation. I created a view for this that is similar to the 'messages received' view from the Toolset messaging module with an addition to also show outgoing messages. I then used the same function to filter for most recent messages.

The 'thread' portion is a view that displays all messages that have a custom field 'first message id' equal to a dropdown option filter. This way I can see all different conversations by selecting a different first message id.

The new message form sits inside the thread view but not inside the view loop. It doesn't work properly yet. Here's the form code:

[credform class='form-dark']
<div class="hidden">[cred_field field='post_title' post='message' value='[wpv-post-title]' urlparam='' class='form-control' output='bootstrap']</div>

[wpv-conditional if="( $(wpcf-message-from) ne '[wpv-current-user info="id"]' )"]
  [cred_generic_field field='wpcf-message-to' type='hidden' class='' urlparam='']
  {
  "required":0,
  "validate_format":0,
  "persist":1,
  "generic_type":"user_id",
  "default":"[types field='message-from' output='raw'][/types]"
  }
  [/cred_generic_field]
[/wpv-conditional]

[wpv-conditional if="( $(wpcf-message-from) eq '[wpv-current-user info="id"]' )"]
  [cred_generic_field field='wpcf-message-to' type='hidden' class='' urlparam='']
  {
  "required":0,
  "validate_format":0,
  "persist":1,
  "generic_type":"user_id",
  "default":"[types field='message-to' output='raw'][/types]"
  }
  [/cred_generic_field]
[/wpv-conditional]


[cred_generic_field field='wpcf-message-from' type='hidden' class='' urlparam='']
{
"required":0,
"validate_format":0,
"persist":1,
"generic_type":"user_id",
"default":"[wpv-current-user info='id']"
}
[/cred_generic_field]

[cred_generic_field field='wpcf-first-message-id' type='hidden' class='' urlparam='']
{
"required":0,
"validate_format":0,
"persist":1,
"default":"[types field='first-message-id']"
}
[/cred_generic_field]

[cred_generic_field field='wpcf-initial-post-id' type='hidden' class='' urlparam='']
{
"required":0,
"validate_format":0,
"persist":1,
"generic_type":"post_id",
"default":"[types field='initial-post-id']"
}
[/cred_generic_field]

<div class="row align-items-end mt-40">
  <div class="col-md-10">
    
[cred_generic_field field='post_content' type='textarea' placeholder='Schrijf een bericht' urlparam='']
{
"required":1,
"validate_format":0,
"default":""
}
[/cred_generic_field]
    
  </div>
  <div class="col-md-2">
[cred_field field='form_submit' value='Verzenden' urlparam='' class='button-secondary']
  </div>
  </div>

[/credform]

So all I need now is two things:
1. Add some logic so that when clicking a chat in the chat block in the sidebar the related conversation opens in the thread div.
2. Add logic so that the reply message form creates a new message post that has the correct first message id and the right message to.

What would be the smartest way to accomplish this?

Thanks again,
Rens

[Christian Cox]

1. Add some logic so that when clicking a chat in the chat block in the sidebar the related conversation opens in the thread div.
Since there is no JavaScript API for Forms, and there is only a very limited JavaScript API for Views, the type of help I can offer here is limited to some support for creating links that add URL parameters and reload the page. So basically in the View of chats on the left side, you'll update the loop template so that each result is encapsulated in one link tag. That link tag's href attribute will include the proper URL parameters that will be needed to populate the new post Form when the page reloads. Clicking one of the links in this View will reload the page with the proper URL parameters applied.

For each generic field input in the Form, you'll need to define a URL parameter that can be used to set its value. For example, the wpcf-message-to input URL parameter could be mto:

[cred_generic_field field='wpcf-message-to' type='hidden' class='' urlparam='mto']

That tells the generic field to look for a URL parameter called mto and set the value of that field automatically using the value of that URL parameter when the page loads. In the View of chats on the left side, you'll need to add the proper value of that mto URL parameter to the link's href attribute.

...
<a href="<em><u>hidden link</u></em> field='message-to' output='raw'][/types]">
...

Is this the type of overall functionality you had in mind, or is there something else you wanted to try to achieve?

[RensV5812]

Hi Chritian,

Thanks for the solution! I've implemented and it works. 🙂

Now, it's probably not possible to achieve the same result using an Ajax refresh instead of a full page reload, right? I mean from selecting a chat to updating the conversation view and posting a new message and refreshing the conversation view.

Rens

[RensV5812]

The ideal situation in this case would be that when a user submits the new message form both views get updated through ajax. This way the experience would be a bit more fluid, a little like using Whatsapp or Messenger. Now I'm forced to refresh the page after form submission in order for the views to update.

Wishful thinking maybe? 😅

Rens

[Christian Cox]

Hi! Since there is no public JavaScript API for Views or Forms, there's not much I can offer towards an AJAX solution here. Page reloads are required to achieve what you're trying to accomplish, unfortunately.

[RensV5812]

Too bad! Thanks anyway. 👍

My issue is resolved now. Thank you!