Adding Controls To A Screen

In this article we will go through how to add controls to a blank screen. As an example, we will create a screen which accepts the User's Name and has two buttons Cancel and Submit.

So to get started, drag drop a grid onto the screen. 


Hoku AppBuilder keeps your app functional across platforms by dividing each screen into a grid. The grid is then resized according to the screen size automatically giving users a smooth experience on all platforms and screen sizes.

Next we need to set the number of rows and columns in the grid. 


To do this,

  • Visualize the screen that you want to create.
  • How many controls do you think will be on the screen one below the other? That's the number of rows you need.
  • How many controls do you think you will be placing side by side? That's the number of columns per row.
  • Don't worry if you cannot get it right the first time, you can edit the grid later and change it as many times as you wish.

Drag and drop the controls you want onto the appropriate sections in the grid. As per our example we will be dropping a TextBox into the First section and Button into the second and third. 


Try It!

  • Drag the Grid control onto the screen
  • Specify the number of rows you need, click Save
  • Specify the number of columns per row, click Save
  • Drag the controls you want into the sections

To flesh out the screen even more, move onto the Adding Properties to A Control article

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Please sign in to leave a comment.