Qt Designer

About

Qt Designer is a Qt’s Framework tool for designing and building graphical user interfaces (GUIs) from Qt components. With it, you can compose and customise widgets or dialogs in a what-you-see-is-what-you-get (WYSIWYG) manner, and also test them using different styles and resolutions.

The reason why Boundless Desktop includes Qt Designer is because it’s extremely useful to create QGIS plugins’ interface dialogs, but also to create highly customised feature forms for editing vector layers’ attributes in QGIS projects. With that in mind, the shipped version brings a set of very convenient special widgets for QGIS (as an example, a combobox with all project’s loaded layers).

Qt Designer is created by the same team that delivers the Qt Framework. See more information about it in Qt official website

Quick start guide

The following quick start guide will introduce you to Qt Designer basics. It will show how to create a simple custom feature form for a vector layer in QGIS.

  1. Download the data for this tutorial here. Unzip it to whatever folder you think is most convenient.

  2. Open Qt Designer using any of the available shortcuts in your computer.

    By default, Qt Designer will show the New Form dialog on opening.

  3. Choose Dialog with Buttons Bottom from the template\forms list and press Create.

    ../_images/qt_designer_new_form.png

    New form dialog window

  4. Have a quick look into the Qt Designer‘s graphical user interface (GUI):

    ../_images/qt_designer_GUI.png
    • In the middle of the screen, you will find the recently created new dialog, a blank form with only a pair of ok-cancel buttons (1).
    • On the right-hand side of the screen you will find the Widget box which lists all available widgets (2). This list can be used to insert widgets by simply dragging and dropping them on top of the dialog.
    • In the left-hand side (among others) there’s the Property Editor (3), that can be used to edit the properties of the dialog itself or of each inserted widgets.
    • Finally, in the top, near the menus, you will find the Forms toolbar(4), which we will use to impose some alignment layout for consistency purposes.

    Note

    In Mac OS X, Qt Designer starts up in Multiple Top-Level Windows mode by default, looking very different from what is presented above. To change it, you should go to Designer ‣ Preferences... and choose Docked Window in the User Interface Mode.

    To see what widgets we want to use on the new form, we will need to inspect the data’s attributes and the layer’s current feature form.

  5. Open QGIS by using any of the available shortcuts in your computer.

  6. Click the Add Vector layers button in the Manage layers Toolbar (or use the Layer ‣ Add Layer ‣ Add Vector Layer...) to browse to the events.shp shapefile location. (see QGIS Quick start guide if you need help with this task)

    ../_images/qt_designer_load_layer.png
  7. Right-click the recently loaded layer’s name in the Layers panel and choose the option Open attribute table. Then, take some time noticing the layer’s field names and types.

    ../_images/qt_designer_layer_attributes.png
  8. Let’s now have a look at the layer’s current feature form. Go back to QGIS main window, select the events layer and click Toggle editing in the digitising toolbar (if not visible check View ‣ Toolbars ‣ Digitizing toolbar). In the same toolbar, select the Add Feature tool and click anywhere in the map canvas to add a new point to your layer. This step should insert a point in the map canvas and show the default layer’s feature form. Take some time analysing the feature form and then press Cancel to discard any changes.

    ../_images/qt_designer_layer_add_point.png

    Let’s go back to Qt Designer and add the necessary widgets for the first field: name.

  9. We will start by adding a text label to our form. Scroll down the Widget box to locate the Label widget in the Display widgets group. Now, drag and drop it on the form. You can change the label’s text either by double-clicking label itself and typing or using the Property Editor, more precisely at the Text property. Set the value to Event's name. If necessary, expand the label box using the small squares in its border.

    ../_images/qt_designer_dragndrop_label.png
  10. Now let’s add an input widget for the name field. This time, instead of scrolling down the Widget box to locate the widget, try typing line edit on the filter bar at the top of it. Drag and drop a Line edit widget to be right below of the label.

    ../_images/qt_designer_dragndrop_input_widget.png
  11. Repeat steps 7 and 8, for the venue field (or just select both existing widgets pressing the Ctrl key, and copy (Ctrl+c) and paste (Ctrl+v). Use Event's venue for the label, and put both Label and Line edit widgets below the other two.

  12. Finally, let’s add some special QGIS input widgets and respective labels to control the date fields. Using any of the two options described in steps 7 and 8, find and insert two QgsDateTimeEdit widgets. Put them side by side, and above them add the labels Start date and End date. Your form should look similar to the one in the following figure:

    ../_images/qt_designer_finished_form_unaligned.png

To connect this dialog’s input widgets to the QGIS layer’s fields, we need to set their objectName property’s value with the same name as the target field. As you will see, this can be done in several different ways.

  1. Select the Name of event Line edit and in the Property Editor set the value of the objectName property to name.

  2. Right-click the Venue of the event Line edit, and choose Change objectName. Set the value to have the name of the second field: venue.

  3. For QgsDateTimeEdit widgets simply use the Object Inspector located above the Property Editor. Double-click on their current names and change them to start_date and end_date

    By now, all your input widgets should have the name of the corresponding fields, and in the Object Inspector you should have something similar to the next figure.

    ../_images/qt_designer_object_inspector.png

    We are almost finished. All we need to do now is align all widgets so that they look good together. For that, we will use a grid layout.

  4. Right-click anywhere on the dialog’s empty space (this will switch any focus over the widgets to the dialog instead) and choose layout ‣ Layout in a grid (or use the toolbar). After that, all widgets should be aligned according to their relative place to each others.

    ../_images/qt_designer_form_grid_layout.png

    After you have applied the grid layout, you can now resize the form to make it more compact, by click and move the bottom-left-corner of the form.

    ../_images/qt_designer_form_resize.png
  5. Finally, using File ‣ Save as.. let’s save the form using a suggestive name, for instance events_form.ui. For easy discovery, save it in the same folder that the data is located.

    Now, let’s go back to QGIS and test the feature form in action.

  6. In QGIS, right-click the layer’s name in the Layers panel and choose Properties. Go to the Fields tab and in the Attribute editor layout select the Provide ui-file option. Then, in the Edit UI browse to the events_form.ui location. Finally, press Ok to apply the changes and close the layer’s properties dialog.

    ../_images/qt_designer_apply_form_in_layer.png
  7. Assuming that the events layer is still in editing mode, let’s use the Add feature again to create a new point in the map canvas. This time, it should open the customised feature form created in Qt designer with all its widgets.

    ../_images/qt_designer_new_feature_form_in_action.png

    To finish our feature form, let’s make a small fix in the date fields otherwise the values won’t be saved in the table because of the use of different date formats in Qt form and QGIS.

  8. Back in Qt Designer, select the two QgsDateTimeEdit widgets (Hold the Ctrl key while clicking) and, in the Properties Editor set the Display format value to yyyy-M-dd and check the calendarPopup property. The changes will be applied on both widgets. Save the form again.

    ../_images/qt_designer_date_fields_tweak.png
  9. Back in QGIS, go to the fields tab in the Properties menu and for each date field change the widget to date/time. Make sure to use the same date format value in the Widget display as the one used in the form (yyyy-MM-dd). Also select the calendar popup and allow NULL options. Press Ok when you have finished.

    ../_images/qt_designer_date_fields_qgis_tweak.png
  10. Now, repeat step #17 to see the feature form changes take effect. The date values should be represented differently and a new icon will alow to choose the date from a popup calendar. Besides, saving the input to the table will now work fine.

    ../_images/qt_designer_form_with_calendar_popup.png

A lot more form customizations can be done using Qt Designer. You can use many different widgets, organise the widgets in groups or tabs, and you can even add some Python logic to make your forms responsive.

Online resources