Create an Iframe component

A configurable component can be added to a page just like any content. Adding the new components to your site is fast, simple, and easy. A script command added to the package.json file automatically generates the templates for your site. The following tutorial shows the instructions to create an Iframe component and add it to your site.

Before you begin

To get started, you need:

• Your Acoustic Content trial or standard edition. Get a free trial version or upgrade to the standard edition from Acoustic Content.
• Install a Node environment with a recent stable version greater than Node >= 8.
• Access to the site application code. To access the code download Acoustic Content Sites single page application. For more information about working with the source files, see wch-site-application/README.md.
• For more information about setting up your development environment, see Setting up your development environment. For more information about developing sites with Content, seeAcoustic Content Sites Customization Programming Model.

Create a content type

Create the Iframe content type in the Content UI and add it to your site. The Iframe content type has the following elements and settings:

• Name: Iframe
• Elements:
• source: link (required)
• width: number (required, a minimum value of 0)
• height: number (required, a minimum value of 0)

Generate template files for the new component

After you create the content type, run the npm script in the SPA project to generate the template files for the new component:
npm run create-layout -- --type Iframe
The template file that is generated src/app/components/iframe/abstractIframeComponent.ts has the following three bounded elements:

@RenderingContextBinding()  
    readonly source: Link;
    
    @RenderingContextBinding()  
    readonly width: number;
    
    @RenderingContextBinding()  
    readonly height: number;

Use these variables to access the content type data.

Create a layout

Define the layout by referencing the variables from the template in the src/app/layouts/iframe/iframeLayout.html file with the angular notation.
For example:

<div [id]="(onRenderingContext | async).id">  
      
            <iframe class="wch-iframe" [src]="source.linkURL | formattedText:'resourceUrl'" [width]="width" [height]="height">  
      
                   Sorry, your browser does not support inline frames.  
      
            </iframe>  
      
    </div>

Add styling to the component

Add style elements to the src/app/layouts/iframe/iframeLayout.scss file. For example:

.wch-iframe {  
      
            resize: both;  
      
            max-width: 100%;  
      
    }

Publish the code changes to your site

• Run the following command to build your code.
  npm run build
  
• Run the following command to deploy your code.
  npm run deploy
  

📘

Note:

You must re-enter your Acoustic Content password for you to successfully run the commands.

Add the component to a page

The new component can now be added to a page in the Content UI. You must create a new content item from the new Iframe content type, complete the elements with data, and add that content item to a page of the site.

Expected outcome

A set of active sample site components are provided to help you get started. The samples include a YouTube video integration, a charting sample with Chart.js, and an Iframe app. Download the sample components from sample-active-site-components GitHub repository.