Utilize Next Wide option on list views to efficiently display information across various screen sizes
written by Lucia Pavlikova on October 11, 2017
List view of an entity is a concise overview of your entity records. It is the first thing you see after loading an entity in Resco Mobile CRM and the first channel you get the basic information from.
After introducing a flexible list view, to automatically adjust the list’s appearance to still convey information effectively, became super easy to design.
Now it is possible to bring even more flexibility to your application using the Next Wide option on a view. It allows you to set several rows for different screen widths within only one view. In these rows, you will be able to adjust the fields that you want to display for certain screen widths. Not sure about its usage? Check the following example.
Example use case:
Using the application on your laptop or in landscape screen mode on your tablet or phone, this is probably how you see the Accounts list view after loading the entity – lots of unused space.
We want to create a view with rows that will always cover all the screen space and display information accordingly to the screen width available.
What do we want to achieve by using Next Wide option on view?
If the screen width is 700 or more pixels we want to see all the substantial fields: Account Name, Email, Main Phone, Street, City and Country of the Account.
If the screen width is from 400 to 699 pixels we want to see: Account Name, Email, Street, City and Country of the Account.
If the screen width is less than 400 pixels we want to see only the most necessary fields: Account Name, Email, and Main Phone.
We want to create such a view to ensure that the space will be used efficiently and that the user will see the data neatly, regardless the screen size. This can also be a way to display information without shortened parts of names in fields.
1. Create a new view or change the existing one
The first row you see after opening the view editor is named “Default” and has default sizes – Width: 240px and Height: 40px.
We will keep the sizes and adjust the fields we want to see in the list view. Don’t forget that in our case the Default view will be used with the smallest screen space available. Choose only the most important fields.
2. Add a new row that is going to be used if the screen space available (screen width) is equal or more than 400 pixels
You can choose whether you want to add an empty row or choose a row template with one or more primary and secondary fields.
Since we have more space available, we can adjust our list view and add some more details about records. This provides more comfort for users as they don’t have to open the form if they need extra information quickly. Change the name of the row and set its width to 400.
3. Repeat the process from the second step and set width to 700 pixels
This view will be used if the screen space available (screen width) is equal or more than 700 pixels. On most screens, this will be the initial view, especially if you are using a laptop or a device in horizontal screen mode.
This row can hold even 6 or 8 fields and despite all the information the list view still appears well-arranged.
4. Define which row to use for certain screen widths
To apply these rows for different screen widths, we need to define which view to use if the available (actual) width exceeds the initial width set for each row.
In our example, we assigned rows for the Next Wide option as follows:
For Default row – Next Wide is Width_400
For Width_400 row – Next Wide is Width_700
For Width_700 – Next Wide is Width_700
5. Save changes, publish the project and synchronize
Don’t forget to choose your created view when working with the selected entity.
6. Run the application and check the results
After opening the application on a laptop and choosing the NextWideVies_Test view this is what the results look like.
Without the form opened (row Width_700 applied):
With the form of the selected record opened as one-column form (row Width_400 applied):
With the form of the selected record opened as two-column form (row Default applied):
After opening the application on an iPad (tablet) and choosing the NextWideView_Test this is what the results looks like.
Without the form opened (row Width_400 applied):
With the form of the selected record opened as one columns form (row Default applied):
Using the application in vertical screen mode (row Default applied):
Get more useful tips and tricks
To get an in-depth look at Resco Mobile CRM features and functionality join us on 14-15th of March in Atlanta for resco.next – our very own conference focusing on all things Mobile CRM. You can reserve your spot here.