Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
# Conflicts:
#	Signum.React/Scripts/Lines/EntityLine.tsx
  • Loading branch information
olmobrutall committed Dec 23, 2018
2 parents b5ecc4c + a46b60e commit 8836f7d
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion Signum.React/Scripts/Lines/EntityLine.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,7 @@ export class EntityLine extends EntityBase<EntityLineProps, EntityLineState> {
);
} else {
return (
<span tabIndex={0} ref={e => this.setLinkOrSpan(e)} className={classes(s.ctx.formControlClass, "sf-entity-line-entity")} {...s.itemHtmlAttributes} >
<span tabIndex={0} ref={e => this.setLinkOrSpan(e)} className={classes(s.ctx.formControlClass, "sf-entity-line-entity")} {...s.itemHtmlAttributes}>
{str}
</span>
);
Expand Down

3 comments on commit 8836f7d

@olmobrutall
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pinned Filters

This merge includes in master branch a feature that will be the delight of your users: Pinned filters.

What Pinned filters try to accomplish is to give a simpler and more guided alternative to Search Control filters. Instead of select the token, operation and value, and then pressing search, an end-used can just select the value from a predefined filter and the results change automatically.

The way they work is, on the SearchControl FilterBuilder there is a new start icon, just press it and some optional settings will appear.

image

Then, if you click in the Filter Icon to hide the filters, you'll see that the pinned filter value is still there:

image

For now, the following options are available:

  • Label: By default, the nice name of the token, but you can customize it for example to be StartDate and EndDate when you compare the same token with different operations (like GreaterThandOrEqual and LessThan respectively).
  • Column and Row: Basic layout options to arrange the Pinned filters, let's see if it's enough.
  • SplitText: Typically combined with operation Contains, splits the selected text by spaces and generates an AND group in the filter request with each part. So every word have to be found.
  • DisableNull: Disables the filters (not sent in the request) when the value is null, very common UI pattern when there are a lot of optional fields for filtering data.

Pinned filters are then a cheap (no-code) alternative to SimpleFilterBuilders, that can be created by and end-user without developer interaction. They do not require a click in the Search button, a request will be made on every value change. Pinned filters are fully integrated in the framework, they are encoded in the URL, and stored in UserQueries.

Default Filters

Pinned filters are so useful, that now the framework has a concept of defaultFilters in QuerySettings, similar to the defaultOrderColumn. This means every single query will have by default filters hidden and a auto-complete-like search box that is able to select by the entity ToString.

Searching in Multiple Columns

Once you have a search-by-toString in every search control, the next step is clear: searching in multiple columns.

The way it works is by creating an OR Group with the desired columns and operation Contains, and instead of pinning each filter, you pin the group itself. Then the internal values get disabled and a new value appears in the group itsef!.

image

Just click in filters to hide them and... tada!

image

Here is an example of using defaultFilters, multiple columns and QueryTokenString<T> together:

  Finder.addSettings({
    queryName: ProductEntity,
    defaultFilters: [{
      groupOperation: "Or",
      filters: [
        { token: ProductEntity.token(a => a.productName), operation: "Contains" },
        { token: ProductEntity.token(a => a.supplier!).implicit(a => a.entity!).append(a => a.companyName), operation: "Contains" },
        { token: ProductEntity.token(a => a.category!).implicit(a => a.entity!).append(a => a.categoryName), operation: "Contains" },
      ],
      pinned: { splitText: true, disableOnNull: true },
    }]
  });

Pinned Filters in Charting and Dashboard

Pinned filters are also available in Charting, and User Charts. They are very useful to create interactive Charts in the Dashboard, where the user can change some of the filters:

image

image

This feature plays with Animated Charts like peanut butter and jelly 🥜 🍞 🍓

Of course, if you have a UserQuery with pinned filters, they will appear in the dashboard as well:

image

How to update

Just take the latest version, add this line if using predictor and sync (just [Enter] everywhere).

Enjoy the Xmas 🎅

@MehdyKarimpour
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent!
Happy new year. 👏

@KonstantinLukaschenko
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice 👍🏼👍🏼👍🏼

Please sign in to comment.