Template

Template

If you came to this page directly, be sure you have performed the WordPress prerequisites before proceeding. If you do not perform these steps, it will not work.

Changes

In the previous example we embedded a complete application in place of the shortcode. IntraWeb can also mix into existing WordPress content.

Root Template

The page of the IntraWeb application must also use a root template. For this example we will use the project from the Page Properties tutorial. We need add a root template tag. To do this we eliminate the first AccordionGroup and move it to the new template. We can keep the remaining accordion groups.

We have moved some things around and eliminated other layouts. The AccordionGroup has also been given a name. Not all changes have been highlighted.

Change the IWML as follows:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    Template[]
      Edit:GuessEdit;
      Text:MsgText;
      Text:CountText;
      EOL;
      BS.Button:GuessButton
        ClientEvents
          Clicked:
            () {
              this.MsgText.Text.Value = '';
              let xGuess = Number(this.GuessEdit.Text.Value);
              if (isNaN(xGuess)) {
                this.MsgBox.Show(this.GuessEdit.Text.Value + ' is not a valid number.');
                this.GuessEdit.Value = '';
              } else if (xGuess < 1 || xGuess > 100) {
                this.GuessEdit.Value = '';
                this.MsgBox.Show(xGuess + ' is not in the range of 1 to 100.');
              } else {
                this.CallServerEvent();
              }
            }
          ]
        ]
        ServerEvents:
          Clicked
        ]
        Text: Guess
      ]
      JQUI.AccordionGroup[]:Accordions
        JQUI.Accordion[] Instructions
          Text Enter a number and click [b:Guess].
        ]
        JQUI.Accordion[] About
          Text Where would we be without the Guess demo?
        ]
      ]
      Alert.Notification:MsgBox
        AlertType: Success
        Title: Guess Demo
      ]
    ]
  ]
]

The designer tree should now look like this:

Template Tags

We need to ad some IntraWeb template tags into our WordPress page in the format:

{%ControlName%}

screenshot

Only controls that exist in the root template of the page. Controls that are in embedded layouts are referenced a whole by referencing their layout which exists in the root template. If you want to reference controls that are not in the root template directly, you need to move them into the root template. Controls also must have a name to be referenced. In this case the EOL is left over from our previous example and is of no use as it has no name and formatting is provided by the template itself.

In our WordPress page or post we can now use these controls and mix with content from WordPress, even from other shortcodes.

Target

We need to tell our shortcode to render into the body of the page rather than a full application in place of the shortcode. To do this, we specify a target parameter:

[iw-app target=* server="<application url>"]

* specifies that the body is to be used. More target options

WordPress

Now that we have made the necessary changes to use a template from WordPress, we can edit our page to include our template tags.

Run

Make sure to save the page before running. The Delphi IntraWeb application must also be running. Now we can view our WordPress page as an end user would.