Making an HTML Composer Page Mobile

How to:

You can make an existing Developer Studio HTML Composer page compatible with mobile output and autosize, as shown in the following procedures.


Top of page

x
Procedure: How to Make an HTML Composer Page Mobile
  1. Open the HTML Composer page in the HTML canvas in App Studio, as shown in the following image.

  2. In the Miscellaneous section of the Properties panel, set the Enable mobile property for the Document object to Yes, as shown in the following image.

  3. Right-click the canvas and click Show Mobile Layout (basic) or Show Mobile Layout (advanced), as shown in the following image.

    Note: For more information on the Show Mobile Layout (basic) and Show Mobile Layout (advanced) options, see the App Studio online Help.

    A preview of the mobile design displays in the canvas.

    The following images show the mobile design for each of the pages (parameter, report, and chart).

    Mobile Design of the Parameter Page in the HTML Canvas

    Mobile Design of the Report Page in the HTML Canvas

    Mobile Design of the Chart Page in the HTML Canvas


Top of page

x
Procedure: How to Make an HTML Composer Page Autosize
  1. Open the HTML Composer page in the HTML canvas in App Studio.
  2. In the Properties panel, select DOCUMENT from the drop-down list at the top. In the Miscellaneous section, set the Autosize Children property to Yes, as shown in the following image.

  3. For the objects inside the container that should autosize, select those objects, and in the Core attributes section of the Properties panel, set the Autosize options property to Accept any changes, as shown in the following image. You can use Keep size and position to prevent the component from resizing automatically. Note that this is an iterative process for each container object and its child object.

    For a multipage container, like a tab, window, or accordion, Autosize Children is a per-page property, so some pages can autosize and others cannot. This property is in the Window/Tab/Accordion attributes section of the Properties panel and is called Selected Page: Autosize Children.

    Note: You can also enable both mobile and autosize by following the steps for both options.


Information Builders