Forum component customization - Create New Post

Avatar

Avatar

Asha2018

Avatar

Asha2018

Asha2018

12-06-2018

Hi Rahul_Bhardwaj​, JK Kendall​, aponnusa

1. I need to add a combo box in the 'New Post' creation form of Forum. This combo box is same as "Follow" button in Forum.

The combo should by default have all drop down values selected, user can change the state though.

2. I need to create a relation node in the custom ForumOperationExtension class, afterAction() method depending on the node selected in the combo box. This will reflect in the "Follow" button of the post created.

For (1), I am extending the Forum Model and view in the custom Forum.js file. In ForumView's toggleComposer event function, I am calling model function as below to set default states for combo box values.

toggleComposer: function(e) {

     this.model.setDefaultState();

     SCF.ForumView.prototype.toggleComposer.call(this, e);

}

Model's setDefaultState function is as below:

setDefaultState: function() {

     var _states = ['activities', 'notifications', 'email subscriptions'];

     this.set("states", _states);

     this.set("subscribed", true);

},

However, {{states}} and {{subscribed}} values are not available at the forum.hbs. I even created CustomForumComponent and CustomForumComponentFactory to add getStates() and isSubscribed() along with its setter call in constructor of component class. Still there is no effect. I do not see these entries in "content/sitescommunity/en/forums/jcr:content/content/primary/forum.social.json" either.

Please let us know the correct approach to achieve this.

For (2), I am using a custom ForumOperationExtension class where I am creating relationship node in the afterAction() method of Forum create operation.

But how do I get the user input combo box values into this operation extension class.

Please suggest an approach to achieve this.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Asha2018

Avatar

Asha2018

Asha2018

02-07-2018

Hi Rahul,

I was able to achieve the required functionality with Implementation approach 1 - client side customization as suggested.

I got the user input values through jquery and extended forum.js to get success handler of post created, as below.

addCommentSuccess: function(response) {

// get post id from response and make ajax calls to update subscription with the user input values

SCF.CommentSystem.prototype.addCommentSuccess.call(this, response);

}

Thank you for the insights.

-Asha G

Answers (8)

Answers (8)

Avatar

Avatar

Rahul_Bhardwaj

Employee

Avatar

Rahul_Bhardwaj

Employee

Rahul_Bhardwaj
Employee

02-07-2018

Great Asha! I am glad that I could be of some assistance!

Avatar

Avatar

Rahul_Bhardwaj

Employee

Avatar

Rahul_Bhardwaj

Employee

Rahul_Bhardwaj
Employee

20-06-2018

Hi Asha,
You might be getting bad request because you might have passed incorrect parameters. Please, analyze network logs and server logs to figure out the cause of the problem. It's difficult to comment without actually seeing the code.


While, I am happy to help on point problems, this discussion is getting beyond the scope of the AEM Community as this problem requires some consulting efforts and it would be really great to contact them.

Thanks,

Rahul

Avatar

Avatar

Asha2018

Avatar

Asha2018

Asha2018

20-06-2018

Hi Rahul,

I am kind of stuck trying to achieve #2 as per your previous response. Request you to help me out on this.

The fourm.js model event that gets triggered on click of "Post" button in "New Post" form is an operation and not a function.

createOperation: "social:createForumPost"

If I extend the OOTB forum.js in my custom component and make 'createOperation' a function, then I get 'Bad Request' error.

createOperation: function() {

     SCF.Forum.prototype.CreateOperation

     // ajax calls to update:subscriptions

}

I am not sure where to make ajax calls. Please guide me.

Avatar

Avatar

Rahul_Bhardwaj

Employee

Avatar

Rahul_Bhardwaj

Employee

Rahul_Bhardwaj
Employee

14-06-2018

Ok, I understand now why you will need an additional combobox. But you can still do away with server side customization and hence implementation 2. For implementation 1 -
1. I am sure you can gather checked values from the combo box via jquery etc.

2. Just make sure you make the same ajax call that is made with the OOTB follow with the values gathered and you can define this in the successhandler of publish post. For that, you can extend forum.js view(Similar to triggering click, we just discussed).

3. Once, post is created, you don't need the new combobox and the OOTB postlevel combobox should pick the relationship created in #2 and show it at post level combobox.

In this way, you can overcome the issue you are facing in implementation-1-" and create relationship node to sync it with the Follow button that appears on the Post."

Let me know, if I am missing anything.

Avatar

Avatar

Asha2018

Avatar

Asha2018

Asha2018

13-06-2018

Hi Rahul,

Yes, we could trigger a click call on OOTB box on all options after Forum Post is created. But the issue here is, I want to trigger click call only on the options as per user input and not on all options. This Subscribe button logic is to get the user selected options.

-Asha G

Avatar

Avatar

Rahul_Bhardwaj

Employee

Avatar

Rahul_Bhardwaj

Employee

Rahul_Bhardwaj
Employee

13-06-2018

Hi Asha,
I am still wondering, why can't you leverage OOTB follow combo box as I explained earlier? I have mentioned that you have to "simulate/trigger a click call on OOTB combo box on all options after the forum post is successfully published", so you will have subscribedId.
Regards,
Rahul

Avatar

Avatar

Asha2018

Avatar

Asha2018

Asha2018

13-06-2018

Hi Rahul_Bhardwaj,

Thank you for your response.

Yes, We want to set the Post "Follow" options by default instead of manually selecting the options once the post is created.

In the "New Post" form there will be a Subscribe button same as Follow button (this will appear only during post creation). User can select one or more options in the Subscribe button. After the Post is created, the OOTB Follow button will display against the Post as per current functionality. But the options in OOTB Follow button in the Post should reflect the options selected by user in Subscribe button.

Implementation approach 1:

1. We have overridden the OOTB subscriptions component as "Subscribe" component in our apps folder.

2. Used the subscriptions.js logic in subscribe.js and have removed the ajax calls to 'social:updatesubscriptions' as we do not have the subscribedId parameter (post id) before the creation of post. (These ajax calls were manipulating the group 'Follow' button as both use the same subscribedId).

Issue: We are not sure how to capture the options selected by user in Subscription button and create relationship node to sync it with the Follow button that appears on the Post.

Implementation approach 2:

1. We have extended Forum component in our apps folder. Added the OOTB subscription.hbs display logic in forum.hbs 'New Post' form.

2. Customized ForumComponent (server side) to expose methods for 'states' and 'subscribed' parameters for use in forum.hbs and also use the same in custom ForumOperationExtension class afterAction() method to create relationship nodes for the Post.

Issue: This customized server side component is not called and we are not able to set the user options and hence unable to proceed further.

Looking forward for your valuable inputs.

-Asha G

Avatar

Avatar

Rahul_Bhardwaj

Employee

Avatar

Rahul_Bhardwaj

Employee

Rahul_Bhardwaj
Employee

13-06-2018

Hi Asha,

Please, correct me if I am wrong but you are trying to set follow options by default instead of need of clicking them manually to follow. Right?
I think that you will also have to hide old combo or you will end up having two combo boxes having same values with one all values checked and the other all values unchecked.
Instead of that, can't you simulate/trigger a click call on OOTB combo box on all options after the forum post is successfully published? This will save you the trouble of writing server side customization and you can achieve everything by just manipulating client side code.

Let me know, if that works or we can revisit your original requirement.-Rahul