Screens

You can duplicate the Screens in the application by creating screens in applications developed with Kuika. To create a Screen, click New Screen from the menu that opens with the + icon button in the Screens panel title. You can create a Blank screen in the New Screen modal that opens, or you can start with template screens. You can also create screens in a few clicks with the CRUD Wizard and From Excel.

If the Screen panel is open, clicking on the screen or elements on the screen automatically redirects to the Elements panel.

1.CREATE

1.1. Blank Screen

Blank screen templates are blank screens. It has three variants: Blank, Blank with header and Blank with header for mobile.

  1. Blank: It is a completely blank screen that does not have any elements on it. You can access this screen with Anonymous Access and All Roles Access.

  2. Blank With Header: It is a screen that only has a Header element on it and works only in web applications.

  3. Blank With Header For Mobile: It is a screen that only has a header element on it and works only in mobile applications.

  4. Click Screens → + icon → New Screen → Blank to create blank screen. Select the Blank type and give it a screen name and click the CREATE button.

1.2. CRUD Wizard

CRUD Wizard is a structure that creates an easy screen in seconds by using the Create, Read, Update and Delete functions connected to your database.

Click Screens → + icon → Screen → CRUD Wizard to create CRUD Wizard screen.

  1. Datasources: This is the part where the datasource connection to the Screen is made.

  2. Screen Type: This is the part where the Screen type determines how the screen to be created will be displayed.

  • Drawer: It is the screen type that allows the page to be navigated from the right, from the left, from the top to the bottom, and to be displayed that way.

  • Modal Box: It is the screen type that enables the page to be navigated and displayed as a box in the middle.

  • Current Page: It is the screen type that allows the page to be navigated and displayed to fill the entire screen.

  1. Layout Design: It is the part where the column layout is selected in the display of the screen.

  2. Choose screen and properties: This is the part where the display settings of the data are specified on the created screen.

  • List screen: The table selected from the data source is created as a list in a screen.

  • Create: It's a screen structure composed of data entry fields based on the data types of the columns located in the data table, allowing for the addition of records to the data table.

  • View: Allows the data to be displayed in the table. It is indicated by the eye icon in the created table.

  • Search: Activates the search element in the created screen. Search is provided on the data. It is displayed as a search bar on the created screen.

  • Pagination: Provides pagination according to the added data content. >,>| at the end of the created table is displayed as.

  • Update: Provides the update of the data. It is indicated with the Pen icon in the created table.

  • Delete: Allows deletion of data. It is indicated by the Trash icon in the created table.

  1. Screen name: The area where the created screen is named. Then, the screen is created by clicking the CREATE button.

1.3. From Excel

You can add the excel files on your device to the database in the application as a table with excel import. Each page of the excel file you uploaded in the Excel import category is added to the database as a table, each column title as a table column and the data under the column written to the table. With this table, CRUD screens can be created with the desired options.

To create a From Excel screen, click Screens → + icon → Screen → From Excel.

  1. Datasources: You can integrate Excel files in your device by clicking Choose from computer on the screens to be created.

  2. Screen name: The area where the created screen is named. Then, the screen is created by clicking the CREATE button.

2. TEMPLATE

Kuika offers ready-made screen templates to speed up the application development process and provide convenience to the user.

2.1. Dashboard templates

  1. Dashboard: There is a ready-made Header structure. The remaining area contains 1 Row and a Table element. There are two column structures in the row. It is a template with a bar chart and donut chart structure and a table in the column structure.

  2. Card and List: There is a ready-made Header structure. There is 1 Row and 1 Table element in the remaining area. The structure of the Row element consists of 1 column.

  3. Two Col: There is a ready-made header structure. The remaining area consists of two columns. While the first column contains the table element, the second column consists of two rows. The first row contains the bar chart element. The second row contains the donut chart element.

  4. Three Col: There is a ready-made Header structure. The remaining area contains 1 Row and a Table element. There are three column structures in the row.

  5. Screen name: It is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

2.2. Form templates

  1. Single Column: The form structure consists of a single column.

  2. Two Columns: The form structure consists of two columns.

  3. Image Gallery: The form structure consists of two columns. The second column structure contains the image gallery element.

  4. Location Picker: The form structure consists of two columns. The second column structure contains the Google maps element.

  5. Screen name: It is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

2.3. List templates

  1. Two Columns: The form structure consists of two columns. The first column structure consists of a table.

  2. Detailed : Form structure consists of table, search and selectbox elements.

  3. Detailed and Search: Form structure consists of table, and selectbox element.

  4. Detailed with Location Picker: Form structure consists of table and google maps element.

  5. Screen name: It is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

2.4. Authentication templates

Learn Authentication screen templates on Kuika.

Kuika, offers various types of screen templates to speed up the application development process. During the application development process, you can use the template screens according to the needs of the application. One of the types of template screens you can use is Authentication screens.

Adding a Template Authentication Screen:

You can add one of the authentication template screens to the application you developed and perform editing and updating operations on it.

To add an authentication screen template, follow these steps:

  1. Open the Screens panel from the left-side.

  2. Click on the Add New Screen icon within the Screens panel. In the pop-up that appears,

3. click on the Authentication item from the left menu.

Template Authentication Screens:

Authentication screen templates come in several types. At this point, you can select the appropriate authentication screen type for the application you are developing.

You can edit the Authentication screen templates and all the elements according to the application's needs.

Authentication screens come with default text contents. You can perform updates and edits in text content specific to your application.

  1. Progressive user: A ready-made template with a list of users is presented.

  2. Reset Password: Reset password ready template is presented.

  3. Sign In: Sign In ready template is presented.

  4. Sign Up: Sign Up ready template is presented.

  5. User Template: A template is provided where information that may be required for the user can be obtained.

  6. Verification Code: A template is presented where the Verification code can be obtained in the reset password operation.

  7. Screen name: It is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

2.5. Screen Group

  1. Grid Card with Search: It is the template that includes the Grid Card structure and search.

  2. Personal Grid Card with search: It is the template that contains the Personal Grid Card structure and search.

  3. Screen name: It is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

Last updated