Feedback Print

Layout

Pages

Using the definition of blocks, a page is a container of blocks. Where each application is created with a least one page that has the default name “pag1”. In applications of the type Form, Control and Search is possible to create many pages for an application. The pages are Tabs where each tab contains blocks defined in the block settings.

Pages( available only in the Form, Control and Search applications) configuration Interface. Pages (available only in the Form, Control and Search applications) configuration Interface.

See the example below of the Form application using two Pages: General Data and Documents.

Form Application using Pages feature. Form Application using Pages feature.

Pages Settings

The form application already comes with a default page, identified as Pag1, that can be renamed, with the creation of new pages. The use of pages is indicated when you have an application that contains various fields of a table (more than 20 for example). A form with more than 20 fields vertically placed would be difficult to use. An application can contain various pages, and in each one of them you can add various blocks.

Pages Configuration Interface. Pages Configuration Interface.

  • Attributes
    • Including A new page, just inform the two fields above the button Include, on the first field you’ll inform the name of the page and on the second field you’ll select the image that’ll represent the icon of the folder, a then click on Include.
    • Deleting A page, just click on the Garbage Can icon corresponding to the line of the page.

      The definition of pages is only considered in the Single Record Forms

    • Tab Folder configurations
      • Font : Allows to define which font-family will be displayed in the field. Clicking on the icon existing on the right side, it opens a page to select the font. Just select the font from the list, and it’ll be applied to field, leaving to you just to confirm the font.
      • Font Size : Informs the desired size for the font.
      • Selected Font Color : Field to set the color for the text that will be in the Selected Tab. Clicking on the existing icon to the right of the field opens a screen containing a color palette. When the selected color is selected, the selected color will be automatically transferred to the field.
      • Selected Background Color : Field to set the color for the text that will be in the Selected Tab. Clicking on the existing icon to the right of the field opens a screen containing a color palette. When the selected color is selected, the selected color will be automatically transferred to the field.
      • Non Selected Font Color : Field to set the color for the text that will be in the Selected Tab. Clicking on the existing icon to the right of the field opens a screen containing a color palette. When the selected color is selected, the selected color will be automatically transferred to the field.
      • Non Selected Background Color : Field to set the color for the text that will be in the Selected Tab. Clicking on the existing icon to the right of the field opens a screen containing a color palette. When the selected color is selected, the selected color will be automatically transferred to the field.

Blocks

Conceptually a block is a “container” where you can position the fields of the Applications: Form, Control or Grid with Slide orientation.

By default, the applications created in ScriptCase are built with a only one block, with the same name as the application. You can add the amount of blocks that you want to organize in a more convenient way. The page below, observe that theirs a column Organization, and that is where you’ll define if the next block will be set beside or below the current one.

Application Block configuration Application Block configuration

On the left side of each block there are two icons, first Application Block configuration has the function to edit all the information relative to the block and the second Application Block configuration is to delete the block.

  • Organizing the position of the Blocks
    • See below how to modify the display order of the Blocks in one Page.

    Click and drag the block that you desire to modify to its new position.

    Application Block Display configuration Application Block Display configuration

    • See how to remove a block from display

    Click on the block desired and drag it to the item “Blocks not Shown”. This way, you can also drag the block to another page if desired. See the images below.

    Application Block Display configuration Application Block Display configuration

    Application Block Display configuration Application Block Display configuration

    • Attributes
      • Block
        • Name : Name of the Block.
        • Label : Title of the block that’ll be displayed in the application.
      • Title
        • Display : Flag that controls the title display of the block.
      • Label
        • Display : Flag that controls id the label of the fields will be displayed in the block.
        • Position : Options to display label :
          • Above : The label will be displayed above the field.
          • Beside : The label will be displayed beside the field.
          • Below : The label will be displayed below the field.
      • Fields
        • Columns : Amount of columns that are displayed side by side in the block.
        • Position : The way that the fields are displayed in the block :
          • Below : The fields are displayed one below the other respecting the amount of columns.
          • Beside : The fields are displayed one beside the other respecting the amount of columns.
          • Line : The fields are displayed one beside the other without the tabulation.
      • Organization
        • Next : The way that the blocks are displayed in the page:
          • Below : Indicates that the next block will be placed below the current one.
          • Beside : Indicates that the next block will be placed beside the current one.
          • Tabs : Indicates that the next block will be placed in a different tab then the current one.
        • Width : Specifies the width that block will occupy in pixels or percentage, in case the value is in percentage, inform the (%).
        • Collapse : Enables the option to close the block.
  • Create New Block

    To include new blocks in an Application, click on the button Creating application blocks configuration. Next, you’ll see the following interface to define the name and label of the block. At the end click on Create.

    Creating application blocks configuration Creating application blocks configuration

    • Attributes
      • Name : Name of the Block.
      • Label : Title of the block that’ll be displayed in the application.
  • Edit Blocks

    To edit a block just click on the icon Creating application blocks configuration, that is on the left side of the block. Next, you’ll see the following interface to define the parameters of the blocks. At the end click on save.

    Application Block editing interface Application Block editing interface

    • Attributes
      • Name : Name of the block.
      • Title : Block title for display.
      • Display Title : This option, when active, allows to display the block title.
      • Title Font : Font applied to the block title.
      • Font Size : Size of the font applied to the block title.
      • Font Color : Font color for the block title.
      • Background Color : Background Color of the block title.
      • Background image : Background image for the block title.
      • Title Height : Height in pixels of the block title line.
      • Horizontal Alignment : Horizontal Alignment of the block title (Left, Center and Right).
      • Vertical Alignment : Vertical Alignment the block title (Top, Middle and Bottom).
      • Display Label : Display the labels of the fields in the block.
      • Columns : Amount of field columns in a block.
      • Columns Width : How the width of the block is defined.
      • Label Color : Color of the field labels.
      • Fields Organization : How the fields are organized in the block.
      • Label Position : Position of the field labels relating to the data.
      • Next Block : Position of the next block relating to the current block.
      • Border Color : Border color for the block.
      • Border Width : Border Width for the block.
      • Block Width : Width for the block.
      • Block Height : Height for the block.
      • Cell Spacing : Cell Spacing in the block.
      • Collapse : Enables the option to close the block.

On this module are available the features of editing, attributes and display of the application, in a way that you can apply display themes, organize blocks, define values and the format of the Header/Footer and etc.

Layout Settings

On this interface, you can define the theme for display of a specific application, this being because ScriptCase uses a Standard Definition of Values per project, that besides the Display Theme, allows to define values for other attributes on a Project level.

Application Display Theme Configuration Application Display Theme Configuration

  • Display Configuration
    • Header Template : Allows to choose the template that’s going to be used as the Header of the application.
    • Footer Template : Allows to choose the template that’s going to be used as the Footer of the application.
    • Button : Allows to choose the button theme for the application.
    • Themes : Choose one of the existing themes, it’ll load the display mode (colors ,fonts, etc.) that’ll be part of the application.

Header & Footer

In this block, it’s the definition of the variables content that’ll be part of the header.

Application Header Configuration Application Header Configuration

This page may change depending on the header format chosen in the Layout Settings.

  • Display Header : This option determines if the header will display.
  • Title : Allows to inform the title displayed in the application.
  • Header Variables : The field variables can be informed with anyone of displayed in the Combo box. Depending on the type, it’ll be necessary to associate the content with the field. Below there are the types of content:
    • Field : When you choose the option “Field”, it’ll open a Combo box beside to choose the field you want. Selecting the desired field, it’ll associate the value of the field with the header.
    • Title : This option when selected it’ll display in the header the value informed in the “Application Title”.
    • Date : When selected the “Date” type, it’ll display the system’s date in the header. There are a diversity of formats using the date and time of the server. The format can be informed in the text field that appears beside the field. To access the existing formats, click on the icon and you’ll view a page display the formats.
    • Image : When selecting the image type, it displays a field to inform the name of the existing image in the server. To locate the images existing and selecting one, click the icon “Choose Image” and to upload new images click on the button “UploadApplication Footer configuration.
    • Value : When selecting the type “Value”, the content informed in the text field that appears beside, it’ll be displayed in the header, you can inform texts and “Global Variables”. e.g. “Employee Name: [v_name]”.

Depending on the Application, you may have more than one title option.

Footer

Application Footer Configuration Application Footer Configuration

This page may change depending on the footer format chosen in the Layout Settings.

  • Display Footer : This option determines if the footer will display.
  • Footer Variables : The field variables can be informed with anyone of displayed in the Combo box. Depending on the type, it’ll be necessary to associate the content with the field. Below there are the types of content:
    • Field : When you choose the option “Field”, it’ll open a Combo box beside to choose the field you want. Selecting the desired field, it’ll associate the value of the field with the footer.
    • Date : When selected the “Date” type, it’ll display the system’s date in the footer. There are a diversity of formats using the date and time of the server. The format can be informed in the text field that appears beside the field. To access the existing formats, click on the icon and you’ll view a page display the formats.
    • Image : When selecting the image type, it displays a field to inform the name of the existing image in the server. To locate the images existing and selecting one, click the icon “Choose Image” and to upload new images click on the button “Upload” .
    • Value : When selecting the type “Value”, the content informed in the text field that appears beside, it’ll be displayed in the footer, you can inform texts and “Global Variables”. e.g. “Employee Name: [v_name]”.