AEM 6.2 Blog/Journal Extend component - Cant post data and Error - Comment value is empty

[sumeer_bashap72]

Hello,

I am trying to extend the OOTB blog/journal component. I can click new article on the blog page and add title and message. But once I click on publish I am not able to post the data and ending up getting the error as Comment Value is Empty. When I tried to debug I can see that post operation call is throwing 400 error and input to the post data i.e., title and message are also empty.

I am not doing any heavy customizations for the OOTB component. For the matter of fact I am just trying to see whether I can extend the OOTB component in my local project repository.

I was successfully able to extend the comments component following the adobe documentation -https://docs.adobe.com/docs/en/aem/6-2/develop/communities/tutorials/extend-comments.html. I followed similar approach to extend blog component and was not able to extend. I even looked at the github sample code - https://github.com/Adobe-Marketing-Cloud/aem-scf-sample-components-extension but I was unsuccessful.

I tried all different ways to resolve the issue, but I always ending up not able to post data. When I try to drag and drop the OOTB Blog/Journal component, I am able to successfully post the data and the component works fine. Can someone shows little direction on how I can extend the blog, looks like I am missing something here. 

Your response would be highly appreciated.

Please find the attached screenshot for the errors and below errors found on the log

com.adobe.cq.social.scf.OperationException: Comment value is empty
    at com.adobe.cq.social.commons.comments.endpoints.AbstractCommentOperationService.validatePa rameters(AbstractCommentOperationService.java:1064)
    at com.adobe.cq.social.forum.client.endpoints.AbstractForumOperationsService.validateParamet ers(AbstractForumOperationsService.java:157)
    at com.adobe.cq.social.commons.comments.endpoints.AbstractCommentOperationService.create(Abs tractCommentOperationService.java:881)
    at com.adobe.cq.social.journal.client.endpoints.impl.JournalCommentCreateOperation.performOp eration(JournalCommentCreateOperation.java:84)
    at com.adobe.cq.social.commons.comments.endpoints.AbstractCommentOperation.performOperation( AbstractCommentOperation.java:137)
    at com.adobe.cq.social.scf.core.operations.AbstractSocialOperation.run(AbstractSocialOperati on.java:82)
    at org.apache.sling.servlets.post.impl.SlingPostServlet.doPost(SlingPostServlet.java:202)
    at org.apache.sling.api.servlets.SlingAllMethodsServlet.mayService(SlingAllMethodsServlet.ja va:149)
    at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.jav a:345)
    at org.apache.sling.api.servlets.SlingSafeMethodsServlet.service(SlingSafeMethodsServlet.jav a:376)
    at org.apache.sling.engine.impl.request.RequestData.service(RequestData.java:546)
    

Thanks,

[JK_Kendall]

Hi,

There is no subject nor message in your request header (the Form Data of the 2nd attachment).

There might be something wrong with your script.

Perhaps more explicit info on what customizations you're making - client-side or server-side or both?

AEM 6.2 or 6.1?  Which Communities feature pack?

- JK

[sumeer_bashap72]

Hi Kendall,

Thanks for the reply. I know that form data is empty in request header. I am not sure why its always empty. I am using AEM 6.2 Communities.

Basically I am just trying to extend the Blog component. Typically how you extend a OOTB text component in your project to have similar functionality. I followed same approach of extension of OOTB Comments component and git hub project given above. I am doing client side customization and I am not doing any extra customizations. 

I am overriding OOTB  journal, entry_topic and comments component into my project inorder to implement the blog component. Extended the view and model class and registering it to each component appropriately. 

Let me know, if there is something extra we need to follow while overriding the Blog component. As stated earlier, I am just following the adobe documentation - https://docs.adobe.com/docs/en/aem/6-2/develop/communities/tutorials/extend-comments.html. 

Its not working. 

There was a similar issue stated by one of the community member back in 2016 - http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/aem-communities.topic.h...

Please help!!

Thanks

[JK_Kendall]

Hi,

It's likely something in the HBS script(s) that you extended.  You might not yet have everything linked up for the extended blog.

It would be helpful if you would use package manager to package up your experimental extension and attach it here.  It shouldn't be too large.  

Do you have 6.2 FP2?

- JK

[sumeer_bashap72]

Hi Kendal.

Thanks for the response.

PFA package with three components - Journal, Blog_Entry and Comment. I changed the extension to txt as I am not able to attach zip files. Its a zip file, please change the extension to .zip after its download and upload it using package manager.

You can test by creating page under the http://localhost:4502/siteadmin#/content/community-components/en using the component page template and these clients libs in the clientliblist component 

• cq.ckeditor
• cq.social.hbs.comments
• cq.social.hbs.voting
• cq.social.hbs.journal

The component group I used is - Custom Community Components.

I tried with AEM 6.2 SP1 Feature Pack 2 as well. I still see the same error with different error response as Required Fields are Missing. As you said I am missing some small configuration to extend the Blog component. Please let me know, if you have any questions. 

I will try to create a git hub project if you want and can push entire project.

Thanks 

[sumeer_bashap72]

Hi,

Any luck on resolving the issue?

[JK_Kendall]

Hi,

It is being looked at - we'll either have more info or questions a little later today.

- JK

[sumeer_bashap72]

Thank You :)

[JK_Kendall]

It's a JS error, but the exact cause of it is still being debugged.

- JK

[sumeer_bashap72]

Thanks Kendal, 

Just checking .. whether your team were able to figure out the issue.

-Sumeer.

[aponnusa]

Its clearly a JS issue. Can you paste the six JS errors or screenshot the JS console. I do see that you have the all the clientlibs. But its clear that its not properly loaded. For Journal you only need these clientlibs to be loaded on your page. 

• cq.ckeditor
• cq.social.hbs.voting
• cq.social.hbs.journal

 For reference try /content/community-components/en/journal . Also try using your customized component in the Component Guide (the same path as /content/community-components/en/journal.html)

[sumeer_bashap72]

Hi,

I understand its a java script error. But I would like to know whats causing the issue. Is there something I am missing here. I am just following the documentation provided by Adobe. If there is something special that need to be done for extension of Blog please let me know. You can check the CustomBlog.js where I am actually extending the model view classes.

The core issue here is that when we try to extend the blog/journal component in any way, the appropriate IDs for the blog model and view don’t seem to be available as they should be, and everything fails.

PFA error I see on the web console. I think even you are seeing the same. 

[aponnusa]

Sumeer,

I dont see any JS file, the customblog.js file (could have been filtered as spam). So making a wild guess, is the resource type of your custom blog registered in your customblog.js file. 

SCF.registerComponent('custom_blog Component', Custom Blog Model, Custom Blog View);

[sumeer_bashap72]

Hi ,

I am sorry if the code got filtered.

This is the code in the customblog.js

(function($CQ, _, Backbone, SCF) {
    "use strict";
   
   var CustomJounalComment = SCF.Components["social/journal/components/hbs/comment"].Model;
   var CustomJounalCommentView = SCF.Components["social/journal/components/hbs/comment"].View;
   var CustomArticle = SCF.Components["social/journal/components/hbs/entry_topic"].Model;
   var CustomArticleView = SCF.Components["social/journal/components/hbs/entry_topic"].View;
   var CustomBlog = SCF.Components["social/journal/components/hbs/journal"].Model;
   var CustomBlogView = SCF.Components["social/journal/components/hbs/journal"].View;
  
    SCF.registerComponent('/apps/customblog/components/hbs/comment', CustomJounalComment,  CustomJounalCommentView);
    SCF.registerComponent('/apps/customblog/components/hbs/entry_topic', CustomArticle , CustomArticleView);
    SCF.registerComponent('/apps/customblog/components/hbs/journal',  CustomBlog, CustomBlogView);
 
})($CQ, _, Backbone, SCF);

[aponnusa]

And in your /apps/customblog/components/hbs/journal/journal.hbs file, do you have this code 

<div class="scf scf-forum" data-component-id="{{id}}" data-scf-component="/apps/customblog/components/hbs/journal">

I am specifically looking for data-scf-component attribute.

[sumeer_bashap72]

Hi ,

Yes, I do have it.

This is the journal.hbs file

{{#if-wcm-mode mode="EDIT" }}
    <div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div class="scf scf-forum" data-component-id="{{id}}" data-scf-component="/apps/customblog/components/hbs/journal">
    <header>
        {{#if properties.title}}
            <h2 class="scf-forum-heading">{{properties.title}}</h2>
            <br/>
            <div class="description">{{properties.description}}</div>
        {{else}}
            <h2 class="scf-blog-heading">{{i18n "Blog" }}</h2>
        {{/if}}
        <div class="scf-clear-both"></div>
    </header>
    {{#if loggedInUser.loggedIn}}
        <div class="scf-action-container">
            {{#if mayPost}}
                <button class="scf-action-item" evt="click=toggleComposer">{{i18n "New Article"}}</button>
            {{/if}}
            {{#if configuration.followingAllowed}}
                <div class="scf-action-item scf-blog-following-block">
                    {{include this.id path="subscriptions" resourceType="social/subscriptions/components/hbs/subscriptions"}}
                </div>
            {{/if}}
            <!--<button class="" evt="click=doShare">{{i18n "Share"}}</button>
    <button class="" evt="click=doSubscribe">{{i18n "Subscribe"}}</button>-->

            <!--<button class="" evt="click=doRSS">{{i18n "RSS"}}</button>-->
            <div class="scf-clear-both"></div>
        </div>

    {{/if}}
    {{include this template="composer"}}
    {{#if mayPost}}
        <ul class="nav nav-tabs scf-nav-tab-padding scf-js-journal-tab" role="tablist">
            <li role="presentation" class="scf-journal-tab active"><a class="scf-js-allPosts" href="#scf-js-allPosts" aria-controls="scf-js-allPosts" role="tab" data-toggle="tab" evt="click=fetchAllPosts">{{i18n "Published"}}</a></li>
            <li role="presentation" class="scf-journal-tab"><a class="scf-js-draftPosts" href="#scf-js-allDrafts" aria-controls="scf-js-allDrafts" role="tab" data-toggle="tab" evt="click=fetchDrafts">{{i18n "Drafts"}}</a></li>
            <li role="presentation" class="scf-journal-tab"><a class="scf-js-laterPosts" aria-controls="scf-js-laterPosts" role="tab" data-toggle="tab" href="#scf-js-laterPosts" evt="click=fetchLaterPosts">{{i18n "Scheduled"}}</a></li>
        </ul>
    {{/if}}
   
</div>

[aponnusa]

Ok, back to the JS issue - are you using CKEditor ? From the first screenshot you shared, it looked like the composer wasnt loading fine. Also can you share your component, I can try to install it and see whats going wrong.

[sumeer_bashap72]

I already shared the component. PFA component. The format is changed from zip to txt as I am not able to upload zip files. Please download the txt file and change it to zip file once downloaded. Please let me know if you have any questions.

Thanks,

Sumeer

[aponnusa]

Thanks for sharing the code. Your component just works for me. I installed your component, duplicated /content/community-components/en/journal, and used /apps/customblog/components/hbs/journal instead of the default journal component.

Initially there was a JS cache issue. But after that it was working fine for me. (The post/create operation was successful, but the post was not displayed as you hbs file was not displaying the tabs)

[sumeer_bashap72]

Seriously !!!!! 

Are you using AEM 6.2 Communities ? Let me spin up a new instance and just install the components I have given to you and test out. 

Did you do any additional configurations?

Thanks,

Sumeer

[samikshaj895937]

Hi , i am also facing the similar issue doing nothing , just dragged and dropped ootb forum component into my page and it gives a number of java script errors .

I actually do not know which clientlibs are missing and what to add to solve this.