Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

AMP(Accelerated Mobile Page) Form Support In AEM

Sayali1
Level 1
Level 1

Hi,

I am trying to develop a AMP (Accelerated Mobile Page) form in AEM. It is a rating form where the user rates and writes a review,I also need to save this review in a database table.Please find the below code for the same:

 

<!doctype html>
<html amp>
<head>
<style amp-custom>

.rating {
--star-size: 3;
padding: 0;
border: none;
unicode-bidi: bidi-override; direction: rtl;
text-align: left;
user-select: none;
font-size: 3em;
font-size: calc(var(--star-size) * 1em);
cursor: pointer;

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
margin-bottom: 1em;
}

.rating > label {
display: inline-block;
position: relative;
width: 1.1em;
width: calc(var(--star-size) / 3 * 1.1em);
}
.rating > *:hover,
.rating > *:hover ~ label,
.rating:not(:hover) > input:checked ~ label {
color: transparent;
cursor: inherit;
}
.rating > *:hover:before,
.rating > *:hover ~ label:before,
.rating:not(:hover) > input:checked ~ label:before {
content: "★";
position: absolute;
left: 0;
color: gold;
}
.rating > input {
position: relative;
transform: scale(3);
transform: scale(var(--star-size));

top: -0.5em;
top: calc(var(--star-size) / 6 * -1em);
margin-left: -2.5em;
margin-left: calc(var(--star-size) / 6 * -5em);
z-index: 2;
opacity: 0;
font-size: initial;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
</style>
</head>


<body>
<form class="sample-form"
method="post"
action-xhr="/bin/rating.rest"
target="_top">
<input type="text"
name="name"
placeholder="Name..."
required>
<input type="email"
name="email"
placeholder="Email..."
required>
<input type="text"
name="title"
placeholder="Title..."
required>
<input type="textarea"
name="textarea"
placeholder="Feedback..."
required>
<input type="submit"
value="Subscribe">
<fieldset class="rating">
<input name="rating" type="radio" id="rating5" value="5" on="change:rating.submit">
<label for="rating5" title="5 stars">☆</label>

<input name="rating" type="radio" id="rating4" value="4" on="change:rating.submit">
<label for="rating4" title="4 stars">☆</label>

<input name="rating" type="radio" id="rating3" value="3" on="change:rating.submit" checked="checked">
<label for="rating3" title="3 stars">☆</label>

<input name="rating" type="radio" id="rating2" value="2" on="change:rating.submit" >
<label for="rating2" title="2 stars">☆</label>

<input name="rating" type="radio" id="rating1" value="1" on="change:rating.submit">
<label for="rating1" title="1 stars">☆</label>
</fieldset>
<div submit-success>
<template type="amp-mustache">
Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.
</template>
</div>
</form>
</body>
</html>

But I am getting the below error:

javax.jcr.nodetype.ConstraintViolationException: No matching property definition: name = Test

Can anyone who has implemented AMP form in AEM help with this issue.

@AEM @smacdonald2008 @kautuk_sahni 

1 Accepted Solution
vanegi
Correct answer by
Employee
Employee

In jcr every node has a node-type (value of "jcr:primaryType"). Most node-types define a schema of properties that are allowed on that node and that has to be defined in the schema. If you try to add and persist (commit) a property that is not defined, you get exactly this ConstraintViolationException.

So here's what likely happened: You've tried to create and store a property on a node that has a strict schema, where that is not allowed.

 

View solution in original post

1 Reply
vanegi
Correct answer by
Employee
Employee

In jcr every node has a node-type (value of "jcr:primaryType"). Most node-types define a schema of properties that are allowed on that node and that has to be defined in the schema. If you try to add and persist (commit) a property that is not defined, you get exactly this ConstraintViolationException.

So here's what likely happened: You've tried to create and store a property on a node that has a strict schema, where that is not allowed.

 

View solution in original post