Screens

1.1. Blank Screen

Blank screen templates are blank screens. There are three types: Blank, Blank With Header and Blank With Header For Mobile.

1. Blank: It is a completely empty screen, that is, a screen without any elements on it. You can control access to this screen with Anonymous Access and All Roles Access.
2. Blank With Header:It is a screen that has only Header element on it and works only in web applications.
3. Blank With Header For Mobile: It is a screen that has only Header element on it and works only in mobile applications.
4. To create a Blank screen, click Screens → + icon → New Screen → Blank. Select the Blank type, name the screen and click the CREATE button.

1.2. CRUD Wizard

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

To create a CRUD Wizard screen, click "+" > New Screen > CRUD Wizard in the Screens panel.

1. Datasources: This is the section where the data source of the screens to be created is selected. Select the relevant data source and data table in these fields.
2. Screen Type: This is the field where the display type of the form screen to be created is determined.
   
   
   • Drawer: It is the screen type where the page is opened with an animation from the right, left, top or bottom edge.
   • Modal Box: It is the screen type that allows the open page to be navigated and displayed like a pop-up in the middle.
   • Current Page: It is a screen type where the open page is closed and opened as a new page.
3. Layout Design: This is the section where the column layout is selected when the screen is displayed on devices such as desktop, tablet and phone.
4. Choose screen and properties: This is the section where the created screen and its properties are defined.
   
   
   • List screen: Allows the creation of the list screen to be made with the table element of the selected data table.
   • Search: Allows the search field to be added to the list screen.
   • Pagination: Allows the page numberer to be added under the table element in the list screen.
   • Create: Creates the form screen that allows new data to be added to the data on the list screen.
   • View: Allows the data to be displayed in the table or not. It is shown with the eye icon in the created table.
   • Update: Form properties are added to update the data. It also automatically adds the navigation to be opened by adding a pencil icon to each item on the list screen.
   • Delete: Adds the function that allows deleting a data from the list screen and the related button.
5. Screen name: This is the field where the created screen is named. Then you can create a screen by clicking the "CREATE" button.

In the Header section of the screens created with CRUD, a "Navigate" action is automatically added to open the Left Menu of the screens when the menu icon is clicked. You can later add the created CRUD screens as individual items from the Left Menu screen.

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 upload in the Excel import category is added to the Database as a table, each column header is added as a table column and the data under the column is written to the table. With this table, CRUD screens are 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: This is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

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 Header structure. There are 1 Row and 1 Table element in the remaining area. There are two column structures in Row. It is a template with Bar Chart and Donut Chart structure and a table in the column structure.
2. Card and List: There is a ready Header structure. There are 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 Header structure. The remaining area consists of two columns. While the first column contains the table element, the second column consists of two rows. Bar Chart element is located in the first row. The second row contains the Donut Chart element.
4. Three Col : There is a ready Header structure. There are 1 Row and 1 Table element in the remaining area. There are three column structures in 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: Form structure consists of a single column.‍
2. Two Columns: Form structure consists of two columns.‍
3. Image Gallery: The form structure consists of two columns. Image Gallery element is located in the second column structure.‍
4. Location Picker: Form structure consists of two columns. Google Maps element is located in the second column structure.‍
5. Screen name: This 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 element. ‍
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 in Kuika.

Kuika offers various screen template types to speed up the application development process. In the application development process, you can use template screens in accordance with the needs of the application. One of the template screen types you can use is Authentication screens.

Adding Template Authentication Screen:

You can add Authentication screen template to the application you have developed, you can edit and update it.

Follow these steps to add Authentication Screen template:

1. To add Authentication screen template, open the Screens panel from the left side.
2. Click on the +New Screen icon in the Screens panel.
3. Click Authentication in the pop-up left menu.

Template Authentication Screens:

Authentication screen templates are available in various types. At this point, you can choose the Authentication screen type suitable for the application you are developing.

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

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

1. Progressive User: Ready-made templates with user list are provided.
2. Reset Password: Reset Password ready-made templates are presented.
3. Sign In: Sign In ready-made templates are presented.
4. Sign Up: Sign Up ready-made templates are presented.
5. User Template: Templates are presented where information that may be required for the user can be obtained.
6. Verification Code: Templates are presented where Verification Code can be obtained in Reset Password operation.
7. Screen name: This 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: These templates include Grid Card structure and Search.
2. Personal Grid Card with search: These are the templates containing Personal Grid Card structure and Search.
3. Screen name: This is the field where the created screen is named. Then the screen is created by clicking the CREATE button.

1. To create a screen after logging in to the Kuika platform, click on the “+” icon in the Screen Panel heading in the “UI Design” module and select “New Screen” from the menu that opens.
   
2. You can create a blank screen in the New Screen modal or you can start with template screens. You can also create screens with CRUD Wizard and From Excel in a few clicks. Then give the screen you have created a name.

       3. Click on the ellipsis icon opposite the name of the screen you created;

• You can change the name of the screen in the Rename field,
  
• Duplicate the screen from the Duplicate field,
  
• You can delete the screen you created in the Delete field.