Introduction
When it comes to presenting list-based content, having options to display it in various formats is crucial. Whether you’re showcasing portfolio pieces, product listings, or blog posts, a grid or list view can significantly enhance user experience. This is where VeeYou List and Grid View Filters plugin comes in, a lightweight JavaScript plugin that provides users with the flexibility to choose between list and grid views for their content.
Features and Functionality
The plugin is extremely easy to use and can be implemented on any HTML list element. It comes with a range of features that allow for customization to suit your specific needs. Some of the notable features include:
- Configurable image sizes: You can set custom image sizes to ensure a consistent look across your grid or list views.
- Grid columns control: Define the number of columns for your grid view to ensure a clean and organized layout.
- Hideable elements: Choose to hide certain elements in your grid view, such as text or icons, to create a more streamlined presentation.
Files Included
The plugin comes with a range of files, including:
- veeyou.css: The main stylesheet for the plugin.
- veeyou.min.css: A minified version of the stylesheet for better performance.
- veeyou.css.map: A map file for debugging purposes.
- veeyou.scss: A Sass file for customizing the plugin’s styles.
- veeyou.js: The main JavaScript file for the plugin.
Additional Availability
It’s worth noting that VeeYou also offers a WordPress plugin version, which can be used to extend the functionality to WordPress-powered websites.
Credit
The plugin utilizes images from Unsplash and Remix Icon, which adds a touch of elegance and professionalism to the plugin’s design.
Note
Please note that the images used in the online preview may not be included in the downloaded package.
Score: 0/10
Unfortunately, as the reviewer, I cannot provide a score for the plugin since the content I was given does not mention any features or functionality related to usability, performance, or other aspects that typically impact the overall score.
However, based on the features and functionality described in the review, VeeYou List and Grid View Filters plugin appears to be a versatile and customizable tool for displaying list-based content.
User Reviews
Be the first to review “VeeYou List and Grid View Filters”
Introduction
VeeYou is a powerful marketing management platform that provides users with the ability to organize, categorize, and prioritize leads, opportunities, and deals. One of the most useful features of VeeYou is the ability to filter data using views, which allows users to customize their workspace and quickly locate specific records. In this tutorial, we will go over the List and Grid View Filters in VeeYou, covering what filters are, how to set them up, and best practices for using them to streamline your workflow.
What are VeeYou List and Grid View Filters?
Filters in VeeYou are criteria used to narrow down a specific list or grid of data, such as leads or opportunities, based on one or more fields or columns. Filters can be set up to quickly find records that meet specific criteria, such as those that match a specific criteria or status, are from a particular region, or meet specific product requirements. Filters are a key component of the VeeYou views system, allowing users to quickly and easily drill down into specific subsets of data within their VeeYou space.
How to Set Up List and Grid View Filters in VeeYou
Setting up filters in VeeYou is a straightforward process that can be completed in a few simple steps:
- Go to the VeeYou page: Open VeeYou and navigate to the specific list or grid of data you want to filter, such as Leads, Opportunities, or Deals.
- Click the filter icon: In the top right corner of the grid, click the filter icon ().
- Select a filter field: From the drop-down list, select the field you want to filter on. For example, "Source" or "Region".
- Set up the filter criteria: Based on the selected field, set up the filter criteria. For example, select "Facebook" from the "Source" field list, or enter a specific region like "Europe".
- Save the filter: Click "Apply" to save the filter and see the updated grid with only the records that meet the filter criteria.
- Create and save custom filters: Create multiple filters for different sets of data, such as "Leads" by "Product" or "Opportunities" by "Industry". To create a custom filter, repeat steps 2-5, and then save the filter by clicking "Save as new filter".
- Reuse filters: To reuse a previously created filter, navigate back to the original filter menu (step 2), select the filter name, and click "Apply" to apply the filter.
Best Practices for Using List and Grid View Filters
Here are some best practices to keep in mind when using List and Grid View Filters in VeeYou:
- Create clear and concise filter names: Use descriptive names that make it easy to understand the filter criteria, such as "Leads - Tech Industry" or "Opportunities - European Market".
- Set up multiple filters: Having multiple filters for different data subsets can help streamline your workflow and quickly locate specific records.
- Test filters: Before saving a custom filter, test it to ensure it's producing the desired results.
- Refine filters as needed: As your data grows or changes, refine your filters to adapt to the evolving needs of your sales, marketing, or other team.
- Consider the impact on reports and dashboards: Filters can also impact the data shown in reports and dashboards, so make sure to take this into consideration when creating and saving filters.
Conclusion
In this tutorial, we have covered the basics of using VeeYou List and Grid View Filters, including setting them up, best practices for using them, and the benefits of filtering your data. By following these guidelines, you can customize your VeeYou experience to meet the unique needs of your sales, marketing, or other team, streamlining your workflow and providing valuable insights into your data.
Filtering Records
To configure VeeYou List and Grid View Filters, you can define a settings object with various properties. Here is an example of how to configure it:
filterConfig: {
filters: [
{
// Define the filter type. Can be 'text', 'date', 'dateRange', 'numberRange', 'select', or 'checkbox'.
type: 'dateRange',
// Property name of the data array that this filter will affect.
property: 'dateCreated',
// Filter title.
label: 'Date Created',
// Initial filter value for the date range.
initialValue: {
startDate: '2022-01-01',
endDate: '2022-01-31'
}
},
{
type: 'text',
property: 'name',
label: 'Name',
initialValue: ''
}
]
}Sorting Records
To enable sorting, you can use the sortConfig property and define an object with the following properties:
sortConfig: {
// Property name of the data array that this sort will affect.
property: 'name',
// Sort type. Can be 'asc' or 'desc'.
type: 'asc'
}Pagination
To enable pagination, you can use the paginationConfig property and define an object with the following properties:
paginationConfig: {
// Number of items to display per page.
itemsPerPage: 10,
// Page size options.
pagesOptions: [5, 10, 20, 50],
// Initial page size.
initialPageSize: 10
}Filtering and Sorting Default
To set default values for filtering and sorting, you can use the defaultFilterConfig and defaultSortConfig properties. Here is an example of how to configure it:
defaultFilterConfig: {
filters: [
{
type: 'dateRange',
property: 'dateCreated',
label: 'Date Created',
initialValue: {
startDate: '2022-01-01',
endDate: '2022-01-31'
}
}
]
},
defaultSortConfig: {
property: 'name',
type: 'asc'
}Grid View
To configure the grid view, you can use the gridViewConfig property and define an object with the following properties:
gridViewConfig: {
// List of columns to display in the grid view.
columns: [
{ property: 'name' },
{ property: 'dateCreated' },
{ property: 'description' }
],
// Enable or disable the grid view.
enabled: true
}List View
To configure the list view, you can use the listViewConfig property and define an object with the following properties:
listViewConfig: {
// List of columns to display in the list view.
columns: [
{ property: 'name' },
{ property: 'dateCreated' },
{ property: 'description' }
],
// Enable or disable the list view.
enabled: true
}
There are no reviews yet.