Level 2

Solved

Form in existing web page

Forum|Forum|10 years ago
October 16, 2015
5 replies
2144 views

Hello,

I would have another very basic question - I will excuse for that but it would be a very important question for me.

I have the task to add a form (name, surename, ..., submit- button) to an existing web page (the web page was developed by an external company) - actually a very basic task. Currently I have done some basic things with AEM 5.6. I did the tutorial http://helpx.adobe.com/experience-manager/using/first-osgi.html (thanks to smacdonald2008). So I know how to:

1. get a Node in a Bundle and get the properties of that bundle: ((JackrabbitSession) session).getNode("Path/to/node"); ...

2. get all users over a UserManager- object: ((JackrabbitSession) session).getUserManager();...

3. how to install a bundle and access the methods of a bundle over sling.getService(...) in a JSP (e.g. /apps/firstOSGI/components/page/keyTemplate/keyTemplate.jsp)

All the above things work fine. But I also have a lack of knowledge concerning how to implement my simple issue mentioned above. Our AEM environment has one Author- Instance and two Publish- Instances - so the Author- Instance replicates/pusblishes to the two Publish- Instances (and I work at our test environment)

My questions would be:

1. Where should I do the developing stuff (at Author- Instance and or at Publishing instances), Sorry for that question but I am not sure if it is developed in Author- Instance, than packaged and than installed in publish- instance or if i should develop this in the publish- instance?

2. How is the best practice to implement this form, the form should not live by its own - my current knowledge is that it can/should be a "content component" and that component must be added to the right page component - is that correct?

3. The content component than is a JSP with the HTML code (without head and body) and scriptlets for Java- Code. With the Java- Code I pick up the content I need for the form (e.g. for a combo box in the form) and fill it - is that correct?

4. after pressing the submit button of the form, an email should be send. Actually I know it with Spring MVC and in the Backend to send the email but I don't know how to do it with AEM. Is there something out of the box?

5. In the existing applications (/app) under /apps/projectName/components/ are "par" folders with "cq:Component"'s in it. I havnt' read about this folder. Maybe someone could explain what it should contain.

I know this are a lot of questions but I would need only (hompefully) the basic hints how to do it with AEM. So I say thanks a lot for your help!!!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by

smacdonald2008 is right. BUT allow me to share with you the SHORTCUT way. :)

1. Where should I do the developing stuff (at Author- Instance and or at Publishing instances), Sorry for that question but I am not sure if it is developed in Author- Instance, than packaged and than installed in publish- instance or if i should develop this in the publish- instance?

I dont think you need any development for this. Everything you need is available OOTB(out of the box) in CQ. Development is done on the author side. Publish instances arent meant for development. They are just meant for deploying code packages and content(by activating stuff on the author side). But there is no restriction to it. You can open a publish instance's crxde and do as you like.

2. How is the best practice to implement this form, the form should not live by its own - my current knowledge is that it can/should be a "content component" and that component must be added to the right page component - is that correct?

Add Form Component Group to your sidekick: Go to design mode using sidekick and and edit the main content parsys on your page. Add the Form component group by checking the checkbox in front of it. You now have the whole bunch of form related components and form fields.

Setup the form : Drag and Drop a form component into the parsys where you need to put the form. You will get a FORM-START and a FORM-END. Inside these drag and drop any fields that you want to include like Text Field, DropdownList, Submit button etc. All these can be customized like ElementName, Title, Description, Initial Values, Constraints, Styling.

ACTIONS : When you are done putting all the fields you need, edit the START-OF-FORM, by clicking the Edit button on Start of Form bar. In the Advanced Tab of the dialog that opens, you will see a dropdown titled ACTION TYPE. This is list of actions that you might wana do when any form is submitted. Select "Mail" option here.

Then expand Action Configuration and put all the values you need.

Your FORM setting up part is done. Learn in detail about forms here: http://docs.adobe.com/docs/en/cq/current/developing/developing-forms.html

Configure SMTP Server: Now you must know that for sending emails we need an SMTP server. Now thats what we need to setup in CQ. For this we can use "Day CQ Mail Service" provided by CQ. It isnt an SMTP server, but lets you use an SMTP server by writing some settings in http://localhost:4502/system/console/configMgr

Follow this link for seeing what to do in this configuration. http://labs.sixdimensions.com/blog/2012-08-20/sending-email-adobe-cq-api/

Just read the first part of that post i.e. "Configuring CQ Mail Service"....That much would be enough for you.

3. The content component than is a JSP with the HTML code (without head and body) and scriptlets for Java- Code. With the Java- Code I pick up the content I need for the form (e.g. for a combo box in the form) and fill it - is that correct?

Not needed.

4. after pressing the submit button of the form, an email should be send. Actually I know it with Spring MVC and in the Backend to send the email but I don't know how to do it with AEM. Is there something out of the box?

Answered in #2

5. In the existing applications (/app) under /apps/projectName/components/ are "par" folders with "cq:Component"'s in it. I havnt' read about this folder. Maybe someone could explain what it should contain.

Not Needed.

As you seem to be a beginner, I suggest you to go ahead as smacdonald2008 suggested. But just in case you are in a hurry, try this.

smacdonald2008

Level 10

I am glad that you found that article useful. It was meant to teach ppl new to AEM how to develop services for AEM using Maven and then how to invoke that service.

When working with AEM -- you develop all AEM content/apps on author - you never develop on publish. Publish is the instance where you publish your web site/apps to.

AEM is similar to Spring MVC in that you use annotations. For example - in Spring MVC you have controllers:

@Controller
public class FormsController

In AEM - you have OSGi services/servlets.

@Component
@Service
public class CustomerServiceImpl implements CustomerService {

However - you can still get data from a front end JSP/form/component to the Java running in an OSGi bundle (like you would in Spring MVC when you get the data to the controllers).

In Spring - there is @Autowired to hook up beans. For example:

@Autowired
FormService parent;

In OSGi - we use @Reference to inject other services into an OSGI service.

@Reference
private DataSourcePool source;

In both cases - you never directly Instantiate the Java objects - that is done for you.

See this article to learn how to use Service Injection in OSGi:

http://helpx.adobe.com/experience-manager/using/custom-sling-servlets1.html

Now with respect to forms - you can code your own form in AEM.

[img]Form.png[/img]

You can then use AJAX to submit data to a Sling Servlet within an OSGi bundle. See this article:

http://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

You can process the posted form data to meet your business requirements. For example - to name a few:

1. You can store the data into the JCR. See this article: http://helpx.adobe.com/experience-manager/using/persisting-cq-data-java-content1.html

2. You can store in a relational database. See this article: http://helpx.adobe.com/experience-manager/using/persisting-cq-data-relational-database.html

3. You can email to someone. See this article: http://helpx.adobe.com/experience-manager/using/creating-custom-cq-email-services.html

4. You can use it to invoke a third party Restful web service: http://helpx.adobe.com/experience-manager/using/restful-services.html

Once you get the data to the Java OSGi bunlde - you can really develop the service/servlet to meet your business requirements. AEM is very flexible.

A

Anonymous

Accepted solution

smacdonald2008 is right. BUT allow me to share with you the SHORTCUT way. :)

1. Where should I do the developing stuff (at Author- Instance and or at Publishing instances), Sorry for that question but I am not sure if it is developed in Author- Instance, than packaged and than installed in publish- instance or if i should develop this in the publish- instance?

I dont think you need any development for this. Everything you need is available OOTB(out of the box) in CQ. Development is done on the author side. Publish instances arent meant for development. They are just meant for deploying code packages and content(by activating stuff on the author side). But there is no restriction to it. You can open a publish instance's crxde and do as you like.

2. How is the best practice to implement this form, the form should not live by its own - my current knowledge is that it can/should be a "content component" and that component must be added to the right page component - is that correct?

Add Form Component Group to your sidekick: Go to design mode using sidekick and and edit the main content parsys on your page. Add the Form component group by checking the checkbox in front of it. You now have the whole bunch of form related components and form fields.

Setup the form : Drag and Drop a form component into the parsys where you need to put the form. You will get a FORM-START and a FORM-END. Inside these drag and drop any fields that you want to include like Text Field, DropdownList, Submit button etc. All these can be customized like ElementName, Title, Description, Initial Values, Constraints, Styling.

ACTIONS : When you are done putting all the fields you need, edit the START-OF-FORM, by clicking the Edit button on Start of Form bar. In the Advanced Tab of the dialog that opens, you will see a dropdown titled ACTION TYPE. This is list of actions that you might wana do when any form is submitted. Select "Mail" option here.

Then expand Action Configuration and put all the values you need.

Your FORM setting up part is done. Learn in detail about forms here: http://docs.adobe.com/docs/en/cq/current/developing/developing-forms.html

Configure SMTP Server: Now you must know that for sending emails we need an SMTP server. Now thats what we need to setup in CQ. For this we can use "Day CQ Mail Service" provided by CQ. It isnt an SMTP server, but lets you use an SMTP server by writing some settings in http://localhost:4502/system/console/configMgr

Follow this link for seeing what to do in this configuration. http://labs.sixdimensions.com/blog/2012-08-20/sending-email-adobe-cq-api/

Just read the first part of that post i.e. "Configuring CQ Mail Service"....That much would be enough for you.

3. The content component than is a JSP with the HTML code (without head and body) and scriptlets for Java- Code. With the Java- Code I pick up the content I need for the form (e.g. for a combo box in the form) and fill it - is that correct?

Not needed.

4. after pressing the submit button of the form, an email should be send. Actually I know it with Spring MVC and in the Backend to send the email but I don't know how to do it with AEM. Is there something out of the box?

Answered in #2

5. In the existing applications (/app) under /apps/projectName/components/ are "par" folders with "cq:Component"'s in it. I havnt' read about this folder. Maybe someone could explain what it should contain.

Not Needed.

As you seem to be a beginner, I suggest you to go ahead as smacdonald2008 suggested. But just in case you are in a hurry, try this.

maximilian_quehAuthor

Level 2

Hello,

thanks once again for the answer - both works fine.

I created a form with OOTB Elements and I also did the tutorial http://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html

So therefore it is clear for me how to create a form and to do some action out of the box and I also know how to create a template, to put a component onto that template -> the component communicates over AJAX with a Servlet and in the doGet/doPost, everything can be done.

What I still not know is, how I can combine this two approaches mentioned at top. I will.

1. create a form with the sidekick- Form menu

2. when submit- Button is pressed, a servlet shoulds be invoked over AJAX

3. in the invoked doGet/doPost- Servlet I than can do everything I want.

Actually currently I don't know, whether I have to develop my forms (with dialogs to customize the form elements and e.g. to set the Servlet Request Path) or how to do it.
It would be great if someone could give me a hint (or tutorial link) in this direction.

Thanks a lot!!

smacdonald2008

Level 10

If you are using AEM 6 - you can use an adaptive form and post the data to a custom service defined within an OSGi bundle. See:

http://helpx.adobe.com/experience-manager/using/posting-aem-6-form-data.html

maximilian_quehAuthor

Level 2

Thanks a lot for all your help! I am a Java Enterprise developer for almost 10 years and have developed 2 years with OSGi Equinox (with ServiceListener, ... -> no Annotations) but currently I feel like the first human because I don't have the whole picture. But I am working hard to get it (Currently I read the book from Ryan D. Lunka - it is actually for authors but in some cases very helpful) - and your help is great - Thanks for that!!

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded