ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Skin templates and Skins
  • Steps to follow
  • Step 1: Creating a skin template project
  • Overview
  • Creating a skin template project
  • Step 2: Creating a skin template report
  • Overview
  • Creating a skin template report
  • Step 3: Copying the skin template reports
  • Step 4: Creating the preview of the skin template
  • Overview
  • Creating a preview of skin template
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Creating the skin template of a report
Steps to follow
Several steps are required to create the skin template of a report:
Remarks:
  • One of the methods for creating a skin template of report is presented here. The method presented below is recommended but it is not mandatory.
  • The user version of the report editor (Reports & Queries) does not allow you to create your own skin templates of reports.
  • The icon indicates a tip. The instructions described in these tips are not mandatory but they will help you create a report skin template.
Step 1: Creating a skin template project

Overview

In most cases, a skin template includes several report templates (up to 4). To simplify the creation and the modification of your skin templates, we recommend that you use a project for each skin template.
The skin template project will group:
  • a skin template report for each type of report. WINDEV proposes 4 types of reports, therefore the skin-template project will contain 4 skin-template reports.
  • a report preview.
Remark: If skin templates are used to customize your windows, your skin templates of window can be created in this project. For more details, see Creating a window skin template.

Creating a skin template project

To create a skin-template project, create a new project:
  • Click in the quick access buttons.
  • The new element window appears: click "Project".This project is linked to no analysis and it uses no skin template.
To easily identify your skin template projects, it is recommended to use the following notation: "SkinTemplate_<NameOfSkinTemplate>". For example, if the skin template is named Caribbean, the project will be named "SkinTemplate_Caribbean".
Step 2: Creating a skin template report

Overview

Each skin template report corresponds to a type of report. Therefore, a skin template report must be created for each type of report used. For more details, see The types of reports proposed by WINDEV.

Creating a skin template report

To create a skin template report:
  1. Create a free record:
    • Click in the quick access buttons.
    • The new element window appears: click "Report" then "Report". The report creation wizard starts.
    • In the wizard, select "Blank report" and validate.
  2. This report:
    • will not be printed on a form,
    • will use no data source,
    • will have the default dimensions.
  3. Specify the name of the report according to following notation: "<NameOfSkinTemplate>_<ReportType>. For example, "Caribbean_Label".
  4. In the "Background" and "Details" tabs of the description of the report blocks ("Block description" in the context menu), specify the desired style (background color, border thickness, ...).
  5. To customize your report, you can add:
    • controls specific to your skin template.
      These controls will be displayed in all the reports that use this skin template. For example, you can add a preset control to display the system date and time, or an Image control to display the logo of a company.
    • controls containing the data of your report.
      When creating a report, the report editor automatically creates all the controls required for using the report. These controls use the default style of the report controls (no background color, no border, "Arial" font, size "11").
      To use a different control style, add these controls (see the list of controls) and define their style in the skin template report. These controls can be positioned in any block.
      If custom controls are added into a skin-template report, these controls will be automatically used when creating the report.
  6. Save the report (Ctrl + S).
Step 3: Copying the skin template reports
To use a custom skin templates in your applications, the skin template reports must be copied to the "Personal\Templates\<NameOfSkinTemplate>" directory of WINDEV or WEBDEV
Remark: Once the skin-template reports have been copied, WINDEV or WEBDEV must be restarted in order to take these new skin templates of reports into account.
Step 4: Creating the preview of the skin template

Overview

To simplify the use of a custom skin template, we advise you to create previews. These previews will be used when a skin template is applied to a report.
Each report preview corresponds to a type of report. Indeed, the preview differs according to the type of report (or according to the current report). Therefore, a report preview should be created for each type of report used.

Creating a preview of skin template

To create a preview of skin template:
  1. In a project associated with an analysis, create a new report:
    • Click in the quick access buttons.
    • The new element window appears: click "Report" then "Report". The report creation wizard starts.
    • Create a "Form" report for example.
  2. Select the skin template of report that was created beforehand. No preview of skin template is displayed in the "Preview" area.
  3. Validate the report creation. The created report becomes the current report.
  4. Copy the created report: on the "Home" tab, in the "Edit" group, click "Copy" (or press Ctrl + C).
  5. Paste the clipboard content in a drawing software ("Paint" for example).
  6. Save image:
    • according to the following notation: "<NameOfSkinTemplate>_<ReportType>.BMP".
      For example, "Caribbean_Form.BMP".
    • in the "Personal\Templates\<NameOfSkinTemplate>" directory of WINDEV or WEBDEV.
See also
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/06/2023

Send a report | Local help