New UI Widgets

I'll think about it.

 

there is something available https://assetstore.unity.com/packages/tools/gui/hex-layout-group-111305 but we all love and prefer coming from you because of your awesome support.

 

Hi @ilih,
In ListView, is there a footer example? just like header?

 

Hi @ilih ,
How can i make AutoComplete Backend driven, for example when user type atleast 3 characters and wait, then i ll call an async function (could be WebRequest or something else) that after completion returns result.
Please advise
Thanks

 

Are want to duplicate the header as the footer? Or move the header down? Or something else?

Use

MinLength

to specify a minimum amount of characters.

You need to create a derived class with overridden

Search()

method.
You can use Examples / Autocomplete / AutocompleteRemote.cs as reference.

 

Just like we have header reveal, i'd love to have a support for footer (after last item)

I used that but somehow my items keeps getting duplicated

 

Added in v1.14.0b7
Example at Examples / ListView / ListViewFooter scene

In the

Search()

method, you should

• set a new list like

  DisplayListView.DataSource = new_items;

• or clear it with

  DisplayListView.DataSource.Clear()

  before adding items

If items still duplicated then maybe the backend response contains duplicated items or some error in the processing of backend response.

 

Thanks, it solved the issue

One more question, can we also hhavve ability to filter items that are coming from backend? because currently autocomplpete show all the remote items without runtime filtering

 

Then you need to set

DataSource

instead of the

DisplayListView.DataSource

, and the use

DisplayListView.DataSource = GetResults();

old code:

Code (CSharp):

1. DisplayListView.DataSource = Text2List(www.downloadHandler.text);

new code:

Code (CSharp):

1. // here Text2List should return List<T>, not ObservableList<T>
2. DataSource = Text2List(www.downloadHandler.text);
3. DisplayListView.DataSource = GetResults(); // GetResults() return DataSource items after filtering

 

Hi @ilih
Problem with remote data is that due to deserializtion 2 object instances will be created for same author object, so i dont want to show an object in autocomplete if i have already used it , so i could filter remote data FURTHER after compapring object ids (server created)
Please advise

 

Hi @ilih,
Can you please remind me which function to override which create listview items? I want to pass subclassesed Owner to my listviiew ittems so they can call functions of owner concrecte listvivew.

 

Then just delete already used items.
Something like this:

Code (CSharp):

1. var results = GetResults();
2. results.RemoveAll(IfAlreadyUsed); // IfAlreadyUsed function to check if item used and should be deleted
3. DisplayListView.DataSource = results;

You can override AddCallback or SetData to set Owner.
But probably the fastest way will be to add a property to the item class to typecast owner to the required type:

Code (CSharp):

1.        public ListViewIcons TypedOwner
2.         {
3.             get
4.             {
5.                 return Owner as ListViewIcons;
6.             }
7.         }

 

Hi @ilih,
Did you get a chance to add custom content support in "toast"/notify ?
Thanks

 

No, do not enough free time yet to implement it.

 

Keeping my fingers crossed

 

What is the use of the 'SelectableHelperEditor' class?
It generates errors with Unity 2020.2.3 (all in the 'GenerateTriggerableTransition()' method) and I'd like to know if I can comment it safely.

 

If you do not use "Auto Generate Animation" in SelectableHelper then it's safe to comment GenerateTriggerableTransition.

SelectableHelperEditor an editor for the SelectableHelper component.
Default Selectable component allows only one target for the interaction animations.
SelectableHelper is used to add additional targets with its own animations.
For example, button: Selectable can work with button text and SelectableHelper can work with button background.

Upd.: just tested with Unity 2020.2.4f1, no errors
Upd. 2: tested with Unity 2020.2.3f1, no errors; what exactly Unity version are you use? Errors text also will be great.

 

Sorry for not providing the errors, I thought it was easily reproduceable as I have them in a new project with only 'New UI Widgets'.

Here are the steps to reproduce the problem:
- I create a new project using Unity 2020.2.3f1 with 3D template
- Import fully 'New UI Widgets' v1.12.6 using the package manager
Observe the following compilation errors:

Also, I do not see the 'New UI Widgets' tab in the 'Project Settings' window, so I am unable to enable Text Mesh Pro support (even when I fix the compilation errors).

 

Bug in Unity automatic API updated cause this problem.
The main problem with the lines: "#if UNITY_5 || UNITY_5_3_OR_NEWER" replaced with "#if UNITY_5" (there also other changes in code that can cause errors too).

Solutions:

• replace such lines with the original one
• or use 1.14.0b7, this version should not cause automatic update

 

Thank you for the quick reply.

It now compiles without having to comment out the whole method, but I still do not see the 'New UI Widgets' tab in the 'Project Settings' window.
So I am unable to enable Text Mesh Pro support.

 

I checked more carefully and looks like the package manager using some very old package version, instead of the new one.

1. "Assets\UIWidgets\Editor\SelectableHelperEditor.cs(231,58): error CS0117: 'AnimatorController' does not contain a definition for 'AddAnimationClipToController'"
   Folder "UIWidgets" was renamed to "New UI Widgets" more than two years ago
2. now I think "#if UNITY_5" also because of the old version, not because of the automatic API update
3. also, it explains why there is no 'New UI Widgets' tab in the "Project Settings"

The solution is to remove old packages from the cache:

• open "C:\Users\ {YourName} \AppData\Roaming\Unity" and delete folders "Ilia Novikov", "Ilya Novikov" from folders "Asset Store" and "Asset Store-5.x"
• restart Unity
• delete the "UIWidgets" folder
• Package Manager: download and import the package
• check "Assets\New UI Widgets\version.txt", it should be "1.12.6f1"

 

Good catch, it's the problem.
The readme indicates 1.9.1.

It's quite strange as I was using 1.10.3 previously, I updated it and the Pacakge manager indicates 1.12.6, but when I import I get the 1.9.1 version...

I'll sort it out, probably by using 1.14.0b7 to avoid Unity and its buggy Package manager.

 

What is the 'good' way to intercept the click on a tab?
What I need when a not active tab is clicked on is:
- to open a dialog box
- depending on the result of that dialog box:
. either go to the tab (standard behaviour)
. or cancel the action and ignore the click

I was doing that in 1.10.3 by overriding the method 'Tabs.AddCallback()' in order to change the behaviour as I needed.

In 1.14.0b7 the class 'Tabs' has been reworked quite a bit.
Now the click action on tabs are processed by 'Tabs.TabButtonInfo', which makes it a lot harder for me to reproduce the same modification I had.

 

When I build in standalone with 1.14.0b7 I have 3 warnings such as this one in the 'Style.Upgrade()' method:
Assets\New UI Widgets\Scripts\Style\Style.cs(813,20): error CS1061: 'StyleDropIndicator' does not contain a definition for 'SetDefaultValues' and no accessible extension method 'SetDefaultValues' accepting a first argument of type 'StyleDropIndicator' could be found (are you missing a using directive or an assembly reference?)

The 2 others are with 'StyleConnector' and 'StyleContextMenu' instead of 'StyleDropIndicator'.


These 'Upgrade()' methods seem to be new (I was using 1.10.3 before and either they weren't there either I missed them), what is their use?
In the 'TabButtonComponentTMPro.Upgrade()' method I have some warning in the editor, in 1.10.3 I had no such warnings:
SendMessage cannot be called during Awake, CheckConsistency, or OnValidate
UnityEngine.GameObject:AddComponent<UIWidgets.TextAdapter> ()
UIWidgets.Utilities:GetOrAddComponent<UIWidgets.TextAdapter> (UnityEngine.Component) (at Assets/New UI Widgets/Scripts/Utilities/Utilities.cs:58)
UIWidgets.Utilities:GetOrAddComponent<UIWidgets.TextAdapter> (UnityEngine.Component,UIWidgets.TextAdapter&) (at Assets/New UI Widgets/Scripts/Utilities/Utilities.cs:96)
UIWidgets.TMProSupport.TabButtonComponentTMPro:Upgrade () (at Assets/New UI Widgets/Scripts/ThirdPartySupport/TMProSupport/Scripts/Tabs/TabButtonComponentTMPro.cs:27)
UIWidgets.Tabs:Upgrade () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:502)
UIWidgets.Compatibility:Upgrade<UIWidgets.Tabs> (UIWidgets.Tabs) (at Assets/New UI Widgets/Scripts/Utilities/Compatibility.cs:28)
UIWidgets.Tabs:OnValidate () (at Assets/New UI Widgets/Scripts/Tabs/Tabs.cs:515)
UnityEditor.SceneManagement.EditorSceneManager:OpenScene (string,UnityEditor.SceneManagement.OpenSceneMode)

 

Code (CSharp):

1. #if UNITY_EDITOR
2.                     DropIndicator.SetDefaultValues();
3. #endif

I added

CanSelectTab

field and

ProcessButtonClick()

method in v1.14.0b8
So you can use CanSelectTab without overriding or override ProcessButtonClick.

You can update package or change code in Tabs.cs
Replace old line:

Code (CSharp):

1. Owner.SelectTab(Tab.Name);

with new line:

Code (CSharp):

1. Owner.ProcessButtonClick(Tab);

Add code to Tabs class:

Code (CSharp):

1.         public Func<Tab, bool> CanSelectTab = AllowSelect;
2.  
3.         public static bool AllowSelect(Tab tab)
4.         {
5.             return true;
6.         }
7.  
8.         protected virtual void ProcessButtonClick(Tab tab)
9.         {
10.             if (CanSelectTab(tab))
11.             {
12.                 SelectTab(tab.Name);
13.             }
14.         }

Also fixed in v1.14.0b8

If you want to change code instead of the package update then wrap "SetDefaultValues" calls with

#if UNITY_EDITOR ... #endif

like this:

Code (CSharp):

1. #if UNITY_EDITOR
2.                     DropIndicator.SetDefaultValues();
3. #endif

It's harmless messages, they should have appeared only once when the scene opened, and no more after the scene saved.

There were huge changes to improve TMPro support: no more separate prefabs for the TMPro and scripts with overrides.
Widgets now use the TextAdapter component which works as a proxy for the Unity Text and TMPro Text components. Upgrade code adds TextAdapter components to the widgets and errors happen somewhere inside Unity code in the AddComponent method, so they cannot be fixed me.

Benefits:

• no more separate packages with TMPro prefabs for each TMPro version
• now it's possible to upgrade the whole scene or separate widgets to use TMPro Text with a single click

 

Thank you for all your help.

The harmless messages were quite annoying because they were also there when playing.
The problem was coming from the fact that some scenes weren't tagged as 'dirty', so Unity didn't saved them, so the 'TextAdapter' components weren't in when playing.
I forced the scenes to be saved and the warnings disappeared.

Good job about the 'TextAdapter' thingy, it makes using TextMesh Pro a lot easier.

 

Hi @ilih,
How do i set autocomplete field to empty/clear after onSelctItem is called?
Thanks

 

Hi @ilih
In AutoComplete, Display ListView when clicks leave its location and appear as last element on canvas which works fine
BUT if autocomplete is inside a scrollview then this behaviour doesnt work as expected

So can you please add a toggle property so we can turn off the default behavior of jumping hearhachy.

Thanks

 

Sorry, I will be able to answer only tomorrow.
The recent Windows update broke the PC and I just now reinstall Windows and am busy with restoring all soft.

 

No problem, i hope it goes well.

 

You can use Autocomplete.InputFieldAdapter to reset input:

Autocomplete.InputFieldAdapter.text = string.Empty;

First you need to modify New UI Widgets / Scripts / Utilities / HierarchyToggle.cs:

• add field:
  
  Code (CSharp):

  1.         [SerializeField]
  2.         public bool AllowToggle = true;
• add next code at the start of methods:

  public void SetParent(Transform newParent)

  and

  public void Restore()

  
  
  
  Code (CSharp):

  1.             if (!AllowToggle)
  2.             {
  3.                 return;
  4.             }

Then add the HierarchyToggle component to the DisplayListView and disable AllowToggle.

 

Added in v1.14.0.b9

Example:

Code (CSharp):

1.         [SerializeField]
2.         protected RectTransform CustomContent;
3.  
4.         [SerializeField]
5.         protected RectTransform CustomContentParent;
6.  
7.         public void NotificationWithContent()
8.         {
9.             CustomContent.gameObject.SetActive(true);
10.  
11.             var notify = NotificationTemplateContent.Clone();
12.             notify.Show(
13.                 customHideDelay: 3f,
14.                 content: CustomContent,
15.                 onReturn: ReturnContent
16.             );
17.         }
18.  
19.         void ReturnContent()
20.         {
21.             CustomContent.SetParent(CustomContentParent);
22.             CustomContent.gameObject.SetActive(false);
23.         }

 

Thanks @ilih
Is this also added officially in v1.14.0.b9 ?

 

Yes.

 

you are amazing

 

Hi @ilih
I'm looking for a autocomplete+combobox hybrid, where autocomplete is just only able to select one item and thats it.
Please advise

 

You need to use both Autocomplete and Combobox.

1. Create Combobox and Autocomplete widgets
2. Place Autocomplete near Combobox.Current in the hierachy, and set the same size, so Autocomplete is displayed over Combobox.Current.
3. Remove Autocomplete.TargetListView
   
4. Autocomplete should have settings: Input Type = All Input; Result = Replace
5. Create script and attach it to Autocomplete:
   
   Code (CSharp):

   1. namespace UIWidgets.Examples
   2. {
   3.     using UnityEngine;
   4.     using UnityEngine.Events;
   5.     using UnityEngine.EventSystems;
   6.  
   7.     public class DeselectListener : MonoBehaviour, IDeselectHandler
   8.     {
   9.         public UnityEvent Deselect = new UnityEvent();
   10.  
   11.         public void OnDeselect(BaseEventData eventData)
   12.         {
   13.             Deselect.Invoke();
   14.         }
   15.     }
   16. }
6. Create script (replace types with yours), attach it to Combobox and then specify Autocomplete and Combobox:
   
   Code (CSharp):

   1. namespace UIWidgets.Examples
   2. {
   3.     using UnityEngine;
   4.     using UnityEngine.Events;
   5.     using UnityEngine.EventSystems;
   6.  
   7.     public class AutoCombobox : MonoBehaviour
   8.     {
   9.         [SerializeField]
   10.         YourAutocomplete Autocomplete;
   11.  
   12.         [SerializeField]
   13.         YourCombobox Combobox;
   14.  
   15.         DeselectListener AutocompleteInputListener;
   16.  
   17.         bool isInited;
   18.  
   19.         protected virtual void Start()
   20.         {
   21.             Init();
   22.         }
   23.  
   24.         public void Init()
   25.         {
   26.             if (isInited)
   27.             {
   28.                 return;
   29.             }
   30.  
   31.             isInited = true;
   32.  
   33.             Autocomplete.OnOptionSelectedItem.AddListener(OnOptionSelected);
   34.             Combobox.ListView.OnSelectObject.AddListener(OnSelect);
   35.             Combobox.Current.onClickItem.AddListener(AutocompleteShow);
   36.  
   37.             AutocompleteInputListener = Utilities.GetOrAddComponent<DeselectListener>(Autocomplete.InputFieldAdapter);
   38.             AutocompleteInputListener.Deselect.AddListener(AutocompleteHide);
   39.  
   40.             Autocomplete.DataSource.Clear();
   41.             Autocomplete.DataSource.AddRange(Combobox.ListView.DataSource);
   42.  
   43.             AutocompleteHide();
   44.         }
   45.  
   46.         protected virtual void OnDestroy()
   47.         {
   48.             Autocomplete.OnOptionSelectedItem.RemoveListener(OnOptionSelected);
   49.             Combobox.ListView.OnSelectObject.RemoveListener(OnSelect);
   50.             Combobox.Current.onClickItem.RemoveListener(AutocompleteShow);
   51.  
   52.             if (AutocompleteInputListener != null)
   53.             {
   54.                 AutocompleteInputListener.Deselect.RemoveListener(AutocompleteHide);
   55.             }
   56.         }
   57.  
   58.         void OnOptionSelected(YourItem item)
   59.         {
   60.             var index = Combobox.ListView.DataSource.IndexOf(item);
   61.             Combobox.ListView.Select(index);
   62.  
   63.             AutocompleteHide();
   64.         }
   65.  
   66.         void OnSelect(int index)
   67.         {
   68.             Autocomplete.InputFieldAdapter.text = Combobox.ListView.DataSource[index].YourField;
   69.         }
   70.  
   71.         void AutocompleteShow(ListViewItem component)
   72.         {
   73.             Autocomplete.gameObject.SetActive(true);
   74.             Combobox.Current.gameObject.SetActive(false);
   75.             EventSystem.current.SetSelectedGameObject(Autocomplete.InputFieldAdapter.gameObject);
   76.         }
   77.  
   78.         void AutocompleteHide()
   79.         {
   80.             Autocomplete.gameObject.SetActive(false);
   81.             Combobox.Current.gameObject.SetActive(true);
   82.         }
   83.     }
   84. }

 

Hi @ilih
When we turn off virtualization in ListView, and lets say show 100 items, and then 50. Does it destroy remaining 50 or simply deactivate for caching?
If it keeps for caching.

Then i need one more feature where listview will not have scrolling view at all because this will be "nested" inside another listview.
So if nested listview have 50 items, then parent listview's default item's height will be based on 50 item height combined.
Will this scenario work?

 

Will be items destroyed or not is controlled with the DestroyDefaultItemsCache option.
Virtualization does not have any relation to it.

You need to modify nested ListView:

• disable virtualization
• move Container components and nested gameobjects to ListView gameobject
• change ListView.Container to ListView itself
• delete ScrollRect, Viewport, and Container gameobjects

So hierarchy should be simple ListView / DefaultItem instead of the ListView / ScrollRect / Viewport / Container / DefaultItem.
Then change parent ListView.Container.EasyLayout settings to set preferred width or height depending on scroll direction.

 

Hi @ilih
First of all, thank you for your prompt reply. I'm getting following errors due to absence of scrollRect

 

It does not look like ScrollRect related error, more about the missing layout group.

Please check if ListView gameobject has ContentSizeFitter and EasyLayout components.
They had to be moved from Container along with nested gameobjects.

Upd. Sorry, it was a bug.
Fixes at ListViewCustom.cs
1. add at the start of UpdateScrollRectSize method:

Code (CSharp):

1.             if (scrollRect == null)
2.             {
3.                 return;
4.             }

2. Replace line at LayoutBridge property getter
old line:

if ((layoutBridge == null) && ListRenderer.IsVirtualizationPossible())

new line:

if (layoutBridge == null)

 

Also

public override void SetPosition(float value, bool updateView = true)
{
if (Owner.scrollRect?.content == null)
{
return;
}

 

Yes, and for the method with Vector2 argiument

public override void SetPosition(Vector2 newPosition, bool updateView = true)

 

Can you please add it officially in next update? including an example scene'd be great

 

Ok.

 

Thanks for making ui widgets great

 

Hi @ilih
Please ping here when its added in next beta.

 

Hi @ilih, is it added in most recent Beta on your site?
I noticed i made these changes in slightly older beta and need to update to latest for notification ccustom content.

 

added in v1.14.0b10
example scene at Examples/ListView/NestedListView/NestedListView scene

 

Amazing