Database Query based Catalog like application

I am new to Flipbit and have some questions.
what I am trying to do:
I am trying to create a app in which the user click/taps on an image and a new page is loaded which has an image and text info .
The image and info is loaded from excel /database.
There will be multiple images in the first screen that has to a row id or "unique name " column field.Based on the index or column name and value the content should be displayed in the second screen.

can anyone point me in the right direction?
Thanks in advance!

Can anyone please answer this. We are planning to buy flipabit premium before that i would like to confirm if its possible. I have done similar application in Intuiface.
Basically its a map ( not real map but just icons on a simple non scalable map)
Each icon is a place and on click icon i need to lookup the database/ Excel sheet to find the information. There will be images, text and videos linking the particular location.

Also is there a 3d carousel in flipabit?.

These tasks are different. If you describe your task in more detail, I will be able to find an appropriate example. Maybe you have video or pictures of how it should work?

Thanks Michael for the Reply
yes I have made a video.
gif file

explanation. click on a icon> goto page 2 > load info from database based on an ID.

How to create catalog-like app with filtering by keywords:

1 Like

Thanks that was wonderful.
I have some doubts.

  1. Can the same be done without using table as a source in action editor.(without using table but only importing a database. (I dont want to show table at all ) )
    Logic is like
    Click on image button> add filter to database > goto page (having the template)
  2. can the image be a path in the database (xl sheet or json)?

Thanks alot.

It’s not clear to me:

without using table but only importing a database

In the Flipabit you can import and load table based data in various formats. It can be local or remote.

can the image be a path in the database

Did you mean image name as the link to another table? Or image url on the server?

Thanks the video was really helpful. I think i found the answer . Thanks a lot.

Another video how to have multiple images per item and how to add carousel:

1 Like

Hi , to change the horizontal alignment of text from left to right?
I tried setting the property of text->horizontal->“Right” but it doesn’t work.
2. How to make the font size adapt the field in case the text overflows?
3. If a qml code has to be added , is it possible to apply it to a specific item already present, If so how to obtain the ID of the item.

Thanks !
ps. we have bought Flipabit already account. Should use that account instead?
You should add the tutorial you gave us in youtube (you can change the images and content since it was from a client), The tutorial was very informative and its a very common usage example

1a. Change alignment using Inspector
1b. Change alignment using Actions

For 2 and 3 see the example autofit_text.pma (8.3 KB)



For auto width set NoWrap in Font Inspector.
For auto height set Word wrap or Wrap anywhere.

1 Like

HI @Michael,
I have small issue with scroll can you take a look.
I have attached the issue i face in the video.
When you scroll content (clickable) there is overlap with the content that is not visible and some button in the scene.
google drive link
Thanks in advance!

hi @Michael any update on this. thanks!
Also one more question will the custom fonts have to be installed on the target platform?
what about android , ios applications?

Custom font will work on any os. However, it may depend on a certain font. The earlier you test, the earlier you find faults.

Hi @Michael,

  1. How to make Scrollbar always visible in the Table (List layout vertical )?
  2. How to get the current image in the image carousel to be shown in the popup?
    image carousel video

Here is the sample with scrollbar and popup custom_scrollbar.pma (244.1 KB)

Paste this code into table widget:

import QtQuick 2.5

Item {
    id: scrollbar

    property int thickness: 10
    property color color: "lightgreen"
    property real opac: 0.9
    property int orientation: Qt.Vertical
    property Flickable flickableItem: contentUi.children[1].children[0].children[0]
    property bool moving: flickableItem.moving    
    property alias currentY: scrollBar.y

    width: thickness
    height: thickness
    clip: true
    smooth: true
    visible: orientation === Qt.Vertical ? flickableItem.contentHeight > flickableItem.height
                                         : flickableItem.contentWidth > flickableItem.width

    anchors {
        top: scrollbar.orientation === Qt.Vertical ? : undefined
        bottom: parent.bottom
        left:scrollbar.orientation === Qt.Horizontal ? parent.left : undefined
        right: parent.right
        rightMargin: scrollbar.orientation === Qt.Vertical ? -(contentUi.width - thickness) : 0
        margins: 2

    onOrientationChanged: {
        if (orientation == Qt.Vertical) {
            width = thickness
        } else {
            height = thickness

    Rectangle {
        id: scrollBar
        property int length: scrollbar.orientation == Qt.Vertical ? scrollbar.height
                                                        : scrollbar.width;
        property int targetLength: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.height
                                                              : scrollbar.flickableItem.width;
        property int contentStart: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.contentY
                                                              : scrollbar.flickableItem.contentX;
        property int contentLength: scrollbar.orientation == Qt.Vertical ? scrollbar.flickableItem.contentHeight
                                                               : scrollbar.flickableItem.contentWidth;
        property int start: Math.max(0, length * contentStart/contentLength);
        property int end: Math.min(length,
                                   length * (contentStart + targetLength)/contentLength)

        color: scrollbar.color
        opacity: scrollbar.opac
        radius: scrollbar.thickness/2
        width: Math.max(scrollbar.orientation == Qt.Horizontal ? end - start : 0, scrollbar.thickness)
        height: Math.max(scrollbar.orientation == Qt.Vertical ? end - start : 0, scrollbar.thickness)
        x: scrollbar.orientation == Qt.Horizontal ? start : 0
        y: scrollbar.orientation == Qt.Vertical ? start : 0



Back to Flipabit >
Copyright © 2018. Flipabit Team. All rights reserved.