Tutorial: Slide query with Blocks and Image field

In this tutorial we will see how to create a Slide query using Blocks and adding an Image field.

Creating a new Query Application.

note:
If you have any questions on how to create a Consultation, go to: Creating a new Consultation

1-Create a new “Consultation” application based on the “Employees” sample table.

2- Also in the application creation window, if you want a better view of the Query, select the “Fields” tab and change the Label of the fields, as shown below:

Configuring the Query Application.

1- In the Application menu, select the “Grid Modules” tab, and configure your application according to the following settings:

Image Field Settings

1- Select the Fields tab and click on the “Photo” field.

2- In the General Configuration tab, select the data type “Image (File name)”, as the images will not be saved in the database, only the image path on the server.

3- Still in the General Configuration tab, change the Height and Width of the image to 180 and 240 respectively.

Block Configuration

1- Still in the Application menu, access the item Layout> Blocks.

2- Create two new blocks and configure them according to the image below.

3- Once this is done, access the “Field Positioning” option in the application menu.

4- Position the fields in the two new blocks created previously, according to the image below.

5- Finally, select the “Run Application” button on the toolbar to generate the Query.

To see more examples created using Scriptcase, go to: Examples: Complete Systems and Applications with Scriptcase.

Tutorials in the same category

Tutorial: Cloud File Management

Some of the data storage services are ready to securely read and store files and images from your S...

Tutorial: Guardar Vista de la Consulta

En este ejemplo, veremos las opciones disponibles para que el usuario final almacene, en sesión o ...

Shortcut Keys

In this tutorial, we will see how you can use or create shortcut keys in a Grid application. 1 -...

Calendario Responsivo

En este tutorial crearemos una aplicación de calendario responsivo Calendario en Navegador ...

Comment this post