Forum Discussion

PAULEM's avatar
PAULEM
Advisor
7 years ago

How to create a 'subscribe to board' button

I have found this info on Create an email subscription to a board ... but I don't understand how to make use of it.  I wish to add a button to certain boards that will allow users to subscribe to the board.  I plan to create a custom component to place on the forum page with some conditional logic to display or not based on the board ID.  This is (mostly) for private boards with small user numbers.  I have also tried using this from board.subscribe:

<#assign boardID = coreNode.id />
<form action="/restapi/vc/boards/id/${boardID}/subscriptions/users/self/add/email" method="post">
 <#if boardID == 'Private1'>
<input type="submit">Subscribe to this board</input>
</#if>
 </form>
 

This is beyond me - I am still learning the intricacies of Lithium code!  I cannot translate the technical advice into a working solution.  Can anyone help please?

  • Parshant's avatar
    Parshant
    7 years ago

    PAULEM,

    You don't need to change the permissions in to your community.

    Simplest way to do this in your community is to add below code to your to lithium endpoint.

     

    <#assign board_ID= http.request.parameters.name.get("forumId") />
<#assign subscribed=restadmin("/boards/id/${board_ID}/subscriptions/users/self/add?subscription.type=email")/>

    and use below Freemarker and Jquery code into your custom component and add this to your page.

     

    <#assign boardID = coreNode.id />  
    <button id="subscribe">Subscribe to this board</button>
    <@liaAddScript>
    (function($) {

    $('#subscribe').on('click', function() {
      $.ajax({
        url: "/community/plugins/custom/community/community/endpoint_name",
        data: {'forumId':${boardID}},      
        method: "POST"
      }).done(function(response) {
        // DO SOMETHING HERE
      }.fail(function() {
        // DO SOMETHING HERE
      }));
    });

    })(LITHIUM.jQuery);
    </@liaAddScript>

    and You can also modify the same code to Unsubscribe the board by changing "Id" selector of button in HTML and jQuery and use unsubscribe API call in endpoint .

  • cike's avatar
    cike
    Champion
    7 years ago

    Hi PAULEM,

    instead of building a complete HTML form you can only add a link or button:

    <button class="lia-button lia-button-primary">Subscribe to this board</button>

    In addition to your custom component code, you need to a small piece of JavaScript as well. The script will the request the Lithium API via AJAX.

    So, you simply add a click event listener to your button and can handle the API request. For more information how the AJAX call could be made, take a look at the jQuery documentation.

     

    Your JavaScript could be something similar to this:

    $('.lia-button').on('click', function() {
   $.ajax({
      url: "/restapi/vc/boards/id/${boardID}/subscriptions/users/self/add/email",
      method: "POST"
   }).done(function(response) {
      // DO SOMETHING HERE
   }.fail(function() {
      // DO SOMETHING HERE
   }));
});

     

    Regards,

    Christian

    • PAULEM's avatar
      PAULEM
      Advisor
      7 years ago

      Hi Christiancike.  Thanks for the code - I've created a custom component and trialled it in staging, and I get 'Error' when it runs.  Here's the code in case you can spot the obvious mistake.  I appreciate your help regardless...

       
      <#assign boardID = coreNode.id />  
<div>
    <#if boardID == 'TEST'>
        <button id="subscribe">Subscribe to this board</button>
    </#if>
</div>

<@liaAddScript>
(function($) {

    $('#subscribe').on('click', function() {
        $.ajax({
            url : "/restapi/vc/boards/id/TEST/subscriptions/users/self/add",
            type : "POST",
            method : "POST",
            username : "${user.login}"
        }).done(function() {
              alert("Success")
        }).fail(function() {
              alert("Error")
        });
    });
})(LITHIUM.jQuery);
</@liaAddScript>
      • cike's avatar
        cike
        Champion
        7 years ago

        Hi PAULEM,

        could you modify your fail function like this

        .fail(function( jqXHR, textStatus, errorThrown )

        and print these parameters within the function body?

        It will help to what error comes up and where your code crashes.

         

        Regards,

        Christian

  • Parshant's avatar
    Parshant
    Boss
    7 years ago

    PAULEM,

    You don't need to change the permissions in to your community.

    Simplest way to do this in your community is to add below code to your to lithium endpoint.

     

    <#assign board_ID= http.request.parameters.name.get("forumId") />
<#assign subscribed=restadmin("/boards/id/${board_ID}/subscriptions/users/self/add?subscription.type=email")/>

    and use below Freemarker and Jquery code into your custom component and add this to your page.

     

    <#assign boardID = coreNode.id />  
    <button id="subscribe">Subscribe to this board</button>
    <@liaAddScript>
    (function($) {

    $('#subscribe').on('click', function() {
      $.ajax({
        url: "/community/plugins/custom/community/community/endpoint_name",
        data: {'forumId':${boardID}},      
        method: "POST"
      }).done(function(response) {
        // DO SOMETHING HERE
      }.fail(function() {
        // DO SOMETHING HERE
      }));
    });

    })(LITHIUM.jQuery);
    </@liaAddScript>

    and You can also modify the same code to Unsubscribe the board by changing "Id" selector of button in HTML and jQuery and use unsubscribe API call in endpoint .

    • PAULEM's avatar
      PAULEM
      Advisor
      7 years ago

      Many thanks Parshant - that worked a treat.  I had to put singles quotes around the board id (that is, '${boardID}') but otherwise, no errors and a successful subscription test.  A big, big thank you to cike and you for your help with this problem.  Regards, Paul.

  • gdawson's avatar
    gdawson
    Advisor
    4 years ago

    Parshant 

    Quick question, when you say

    "Simplest way to do this in your community is to add below code to your to lithium endpoint."

    What do you mean by endpoint?  

    Thank you,

    Greg