ID Save and Display Name - material ui multiselect with chips - reactjs

I am using Material UI Multiple Select based on documentation example. I need to save id of the selected option and show name,
I have tried many ways but nothing helps.
I need to store the id and Display the value. Please help me with your guidance.
Here is my codesandbox link

I was wondering about the same and the only way I found to make it work is by transforming the array to an object.
Here goes the sandbox: https://codesandbox.io/s/material-demo-5cy6p
In it you can see how names is no longer an array but an object with the value of the menu option as a key and the name you want to actual show as the value:
const names = {
1: 'Lorem',
2: 'Ipsum',
}
This way you can access the value(the name) in O(1) time (if you are not familiar with the Big O notation gives this a read: https://en.wikipedia.org/wiki/Big_O_notation), this is way faster than going through the whole array looking for an object with the same id as the one you are mapping.

Related

How to show variable's value in Dialog Name (Einstein Bot)

I need to show the Product's Name in the Menu, I think image says it all:
Click here to see the image
I have a menu, with two options, and the first show a text with a variable, but {!Product} don't works, there is a way of this work?
When I put {!Product} in Message or Question, this works normal...
I didn't find any solution for showing the variable in the title dialog, my solution was to change the message to "Know more about this product", I left a generic message.
Old topic but the answer might help someone.
There's a great article explaining how to get some dynamic information https://www.infallibletechie.com/2021/11/how-to-create-case-from-einstein-bot.html
In your case, I guess you need to
Query your products (the out-of-the-box Einstein Bot query is simple and has a limit of 3 items but you could call a flow or apex to get better granularity on the filter/logic and control le size)
Store the query result in a Custom record list Variable
Query data with a flow
Use a dynamic question and merge fields to display what you want
Top configuration of the dynamic question
Down configuration of the dynamic question

Is it possible with an ADF ComboBox component to type in values not present in the given LOV?

I am working on an input form using ADF. I have an input field in which I want to show a list from which the user can select the value and also require a type option in case the value user want is not in the list.
I use the JDeveloper 12.2.1.3 for development. I have tried using ADF ComboBox component based on a static list. The component gives a list a expected. But I cannot type in a new value in case the value I wanted is not in the list. I can only type whatever is in the list already.
I am looking for something similar to the HTML input-datalist combination which gives a list and allows type if the intended value is not in the list.
The InputListOfValues and other LOV components only allow you to enter data which is present in the list. That is the way these components are designed. It would not make sense to allow other input as you normally use such components in places where you want to make sure the user can only input reference data defined in other data.
Anyway, it's easy to create some kind of component which allows you exactly what you want. I wrote a blog n this here https://tompeez.wordpress.com/2013/02/03/jdeveloper-11-1-1-6-0-afinputtext-with-self-made-look-up-not-using-lov/
From this page you can download and run the ADF Faces Rich Client Demo, which shows all components and what they do.

Order search results in react-select

When using react-select, search results are ordered alphabetically by default. This is a good default but not so nice if I have an exact match that is not first alphabetically. For example, a user may have the following options:
a_react
b_react
c_react
d_react
react
With these options, the user may search for 'react' and not be any closer to selecting the option that exactly matches the search term. Is there any way to optimize for exact matches?
react-select has a prop if you want to have a custom filter - filterOption.
If you want to show better matches based on what a user queries, use match-sorter in combination with onInputChange of react-select to create a custom filter. Here's a working demo.
There are two select inputs. Type l and observe the difference in suggestions.
In react-select you can pass a filterOption property to change how the filtering works. They provide a nice api to do what you want, which is start matching from the beginning of the string rather than anywhere in the string. That would look something like this
filterOption={createFilter({ matchFrom: "start" })}
where createFilter is imported from react-select
#ron4ex has a great answer here. Just wanted to offer another similar solution as I had 1 big issue with match-sorter.
Issue with match-sorter:
My list is a list of family relationships, e.g. "mother", "mother-in-law"
match-sorter would prioritize mother-in-law over mother as I started typing. Only once it was a full match would it prioritize mother. However, react-select kept the focused option as mother-in-law.
Even if I could fix the default focus issue, I would rather "mot" match to "mother" before "mother-in-law".
Enter new solution: Fuse:
Similar implementation as match-sorter
Fuzzy search with lots of customization options
Default config sorted "mother" over "mother-in-law"
const fuse = new Fuse(relationshipTypes, { keys: ["label"] });
<Select>
onInputChange={inputValue => {
setRelationshipOptions(
fuse.search(inputValue).map(value => value.item)
);
}}
</Select>
notice the map on fuse.search as fuse returns a mutated array with the original values in an item key and a second key being the index. Hence, fuse.search().map

Options on all Angular Chosen (plugin) select elements disappear when any are selected

Admittedly, I know just enough about Angular to be dangerous. However, I'm fairly certain I've followed the instructions for the plugin concisely.
The issue is: whenever I select any of the options from one of my select fields using the chosen plugin (City, Nationality, Hotel, Room Type...) the result never gets populated, and the results from all the other select fields disappear. I'm fairly certain this is user error on my part - any clarification or help is much appreciated.
You can see an example here: http://casamarelanoivas.com.br/sst/test/
Thanks.
Kyle
You are binding the selected value in your list to the same model variable you are using to generate the dropdown list. So whenever you select a value from the drop down list, you are wiping out the list values.
Here is what you have:
<select ng-model="model.cities" ng-options="city.name for city in model.cities">
This is the pattern you want to use instead.
<select ng-model="selectedCity" ng-options="city.name for city in model.cities">
In your controller you can then get the selected value from $scope.selectedCity

Set opportunity amount filed value as default value in related object field

I have a custom object FlightRequest for Opportunity object and there is an Amount filed both in opportunity and FlightRequest.
I want to set Opportunity's Amount filed value as default in FlightRequest's Amount Field. So whenever New Button clicked for FlightRequest, Amount input should already field with Opportunity's Amount
I m using Standard page layout not any visual force page layout and can not use it.
I saw there is an option to set default value for a field but Opportunity object is not shown in Select Field Type options
please advice how can i accomplish this
thanks in advance
This is possible with a "unofficially" supported technique (meaning everyone has been doing it for 10 yrs and while they say it's unsupported they'll never break it, too many customers use it) called URL hacking. Basically when they click the new button you'll pass the value for your field into the new record page dynamically based on the parent record. There is a good blog post tutorial on this. Give it a try and that should do what you need.
You need to set up a Master-Detail relationship between the objects, then you can setup the Amount field on the FlightRequest object as a formula field that references the Amount field on the Opportunity.
This should accomplish what you need to do. The Master-Detail relationship is essential for the cross-object reference of fields.

Resources