In this exercise, you are proposed to continue designing your HTML output by adding an image, JobInfos and a hyperlink.

Exercise

Download and import the attached configuration called 02. XHTML Output (Image, JobInfo, and Hyperlink) in Lasernet Developer 9. Afterwards, go to the Forms section and open the Sample form.

Let's start with adding an image from the external file to the output. To this end, follow the steps listed below.

1. In the output, switch to the Template tab.

2. Place the cursor where you want to paste an image.

3. On the Developer toolbar, click Image, then click Local and Remote, and then click File....

4. In the Choose an image file dialog displayed, select a file, and then click Open.

5. Once the image is inserted, drag one of the control points on the sides or corners of the selection box to resize it.

Continue designing your HTML output by adding JobInfos. To this end, follow the steps listed below.

6. Switch to the XHTML tab to make adding JobInfos to the input possible.

7. On the Developer toolbar, click JobInfo.

8. When a pointer becomes a cross, click the <ContactPersonName> element.

Once you are done, repeat steps 7-8 to JobInfo to the <SalesID> element.

9. In the output, switch to the Template tab.

10. Place the cursor in the first line before a comma and type the following text: #ContactPersonName#.

11. Place the cursor at the end of the third line and type the following text: #SalesID#.

You are now proposed to add a hyperlink. To this end, follow the steps listed below.

12. In the forth line, delete the us text and place the cursor instead.

13. On the toolbar, click the button which allows you to create a link to a web page.

14. In the Insert Hyperlink dialog displayed, type Our Support Team in the Text to display text box and http://www.formpipe.com/Support/ in the Address text box. Once you are done, click OK.

15. On toolbar, click the Preview button to view the final result in a browser window.