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?

  • 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 .

10 Replies

  • 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

  • PAULEM's avatar
    PAULEM
    Advisor
    7 years ago

    Hi Christiancike.  Thanks for your ongoing help.  This will be a handy tip forever!  Here's the result (bit of a clue here):

    jqXHR = Object
    TEST:2538 textStatus = error
    TEST:2539 errorThrown = Unauthorized

    It might be that I can't do this even though we have all the code in place.  Basically, this is the only "option" we want the user to have access to - they don't need any of the others in the dropdown list - so I might have to take this up with Lithium Ideas?!

    Thanks for your help - I really appreciate it.

  • cike's avatar
    cike
    Champion
    7 years ago

    It seems that your users are not having the permissions to use the API that way. Maybe you could check your permission settings and grant your users the following:

    Make REST API calls with modify access

    But keep in mind that this could be a potential security risk.

    Well, in case you only need the subscribe/unsubscribe feature from the board options dropdown, you could use an other approach:

     

    • Hide the complete dropdown via CSS
    • Use JavaScript to traverse the HTML DOM and find the subscribe/unsubscribe link
    • Copy that link (or the link target only) and use them in your custom button HTML

    Thats the anchor from the default dropdown:

    <a class="lia-link-navigation addBoardUserEmailSubscription lia-link-ticket-post-action lia-component-subscriptions-action-add-board-user-email" data-lia-action-token="rv_2rG1osP-Fl1kLnoxdIuN1hHZeTgnbDoH6iXoEzAAdIbbIEHm6gv5wkiBUIe2I" rel="nofollow" id="addBoardUserEmailSubscription" href="https://....&amp;t:cp=subscriptions/contributions/boardactions">Subscribe</a>

    Regards,

    Christian

  • 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.

  • 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