My teamsite component wont access my controller method
Hello Teamsite 16.7
I have my content footer component that contains a form. This form when submitted should do some javascript then call my controller action and the page should not be reloaded.
I have the controller and method mapped in my component XML
<Data>
<Datum ID="PositionalEmail" Name="EmailAddress" Label="Add the email address for your sites positional mailbox" Type="String"/>
<Controllers>
<Controller Name="PageFeedback">
<Object Scope="local">cs.gc.forces.livesite.controller.form.ContentFooterController</Object>
<Method>sendFeedback</Method>
</Controller>
</Controllers>
<!--
<Group ID="footnotes" Name="FOOTNOTES ("+" to add; "X" to delete; arrows to reorder)" Replicatable="true" CloneGroupID="Footnotes">
<Datum ID="footnote" Type="String" Name="footnote" Label="Footnote text:"/>
</Group>
-->
<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>
and this form in xsl
<form id="feedbackYes" method="post" class="wb-postback wb-disable-allow" type="external">
<fieldset class="gc-pft-btns chkbxrdio-grp row row-no-gutters d-sm-flex flex-sm-wrap align-items-sm-center">
<legend class="col-xs-12 col-sm-7 nojs-col-sm-12 col-md-9 col-lg-8 text-center text-sm-left nojs-text-left mrgn-tp-sm pr-sm-3">
<span class="field-name"><xsl:value-of select="$labels/label[@key='component.footer.page-feedback-question']"/></span>
</legend>
<div class="col-xs-12 nojs-hide">
<button name="helpful" value="Yes-Oui" class="btn btn-primary" aria-describedby="gc-pft-why"><xsl:value-of select="$labels/label[@key='component.footer.yes']"/></button>
</div>
<div class="col-xs-12 col-sm-5 col-md-3 col-lg-4 text-center text-sm-right nojs-show">
<button type="submit" value="Yes-Oui" class="btn btn-primary" onclick="handleYesClick(event)"><xsl:value-of select="$labels/label[@key='component.footer.yes']"/></button>
<button type="button" class="btn btn-primary mrgn-lft-sm" onclick="handleNoClick(event)"><xsl:value-of select="$labels/label[@key='component.footer.no']"/></button>
</div>
</fieldset>
</form>
and its asscoiated JS
function handleYesClick(event) {
event.preventDefault();
document.querySelector('.gc-pft-thnk').classList.remove('hide');
document.querySelector('.gc-pft-btns').classList.add('hide');
setTimeout(function() {
document.getElementById('feedbackYes').submit();
}, 1000);
return false;
}
And my controller action with a logging statement to test access.
public class ContentFooterController {
private static final Log LOGGER = LogFactory.getLog(ContentFooterController.class);
public ForwardAction sendFeedback(RequestContext context) {
LOGGER.debug("inside the controller method");
// don't redirect page return null; }
}
when I click yes, the page reloads and I dont recieve any debug statement in my livesite runtime logs.
am I missing some kind of mapping? I was under the impression that mapping a controller action in the component xml would trigger on a submit
Best Answer
Answers
-
Also, I assume you are reading this portion of the manual:
Component controllers run when content items are submitted to the components.
ComponentId in the query string must match the component ID to run the
controller.I do not read that as specific only to a form. Instead when the Data is sent to the component, (i.e. loading from a DCR), then the controller runs.
0 -
My last comment to reply to is not visable to me. This is a test of that
0 -
@nipper In response to your comments.
Yes, on click the JavaScript is run but the JavaScript also calls the form submission at the end. The JavaScript is necessary to control some dynamic transitions and eventually display a user feedback message which is why it is required the page not reload.
function handleYesClick(event) {
event.preventDefault();document.querySelector('.gc-pft-thnk').classList.remove('hide'); document.querySelector('.gc-pft-btns').classList.add('hide'); setTimeout(function() { document.getElementById('feedbackYes').submit(); }, 1000); return false; }
The JavaScript should do what it needs to do then call submit on the form in question, and were it hitting my controller action it would generate an email then return null on a ForwardAction to no reload the page.
public ForwardAction sendFeedback(RequestContext context) {LOGGER.debug("inside the controller method");
// don't redirect page return null;
}
************************************************************************************************************************
When I inspect the form on the rendered html teamsite populates the form action with the following component ID
<form method="post" id="feedbackYes" action="/en/964-metadata-test.page?submit=true&amp;componentID=1718705296596">
But the content footer component xml has it listed as
<Component ID="1349205467853" Version="3.1.1.0" PageID="0" TemplateComponentID="0" CanBeActive="true" Checksum="c5c2ee81887591d22809807f0e4c4ee6b87e355a">
I do not understand how Teamsite populates these component ids on the rendered HTML or how they could be different ids.
***********************************************************************************************************************
This contentFooter.component was a previously built component that did not require a post controller in which I have added the form section and mapped a controller action. Previously it just rendered a <DIV> with the pages modified date. The component and the page it is found on have both been saved and published on Teamsite and the <data> section of my component xml on Teamsite Y: is as follows.
<Segment ID="0">
<Properties ComponentID="1349205467853"/>
<Data>
<Controllers>
<Controller Name="PageFeedback">
<Parameters/>
<Object Scope="local">cs.gc.forces.livesite.controller.form.ContentFooterController</Object>
<Method>sendFeedback</Method>
</Controller>
</Controllers>
<!--
<Group ID="footnotes" Name="FOOTNOTES ("+" to add; "X" to delete; arrows to reorder)" Replicatable="true" CloneGroupID="Footnotes">
<Datum ID="footnote" Type="String" Name="footnote" Label="Footnote text:"/>
</Group>
-->
<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>
</Segment>
However when I go to the same section of code in the .page xml on Livesite the controller section of the code is non-existant.
<Segments>
<Segment ID="0">
<Properties ComponentID="1718705296596"/>
<Data>
<!--
<Group ID="footnotes" Name="FOOTNOTES ("+" to add; "X" to delete; arrows to reorder)" Replicatable="true" CloneGroupID="Footnotes">
<Datum ID="footnote" Type="String" Name="footnote" Label="Footnote text:"/>
</Group>
-->
<External>
<Object Scope="local">ca.gc.forces.livesite.external.core.FooterExternal</Object>
<Method>getContentFooter</Method>
</External>
</Data>
</Segment>
</Segments>
Im fairly new to teamsite/livesite but the only example I have of a component post controller is formatted in a very simmilar way.0 -
@nipper Yes I reformatted the form to just be the basic form and action with an <input type=submit value=submit> still does not hit the controller without the javascript component.
I can also confirm that the <controller> elements are now present on the page in the <data> section after updating and publishing the template where the component resides.<form action="$PAGE_LINK[.]#{/Properties/@ComponentID}" id="feedbackYes" method="post" type="external">
<input type="submit" value="submit" id="submitYes">
0
Categories
- All Categories
- 122 Developer Announcements
- 54 Articles
- 151 General Questions
- 148 Thrust Services
- 56 OpenText Hackathon
- 37 Developer Tools
- 20.6K Analytics
- 4.2K AppWorks
- 9K Extended ECM
- 918 Cloud Fax and Notifications
- 84 Digital Asset Management
- 9.4K Documentum
- 31 eDOCS
- 186 Exstream
- 39.8K TeamSite
- 1.7K Web Experience Management
- 7 XM Fax
- Follow Categories
- Docker Automation
- LiveSite Content Services (LSCS) REST API
- Single Page Application (SPA) Modules
- TeamSite Add-ons
If you are interested in gaining full access to the content, you can register for a My Support account here.