{"id":95,"date":"2020-12-02T14:15:24","date_gmt":"2020-12-02T13:15:24","guid":{"rendered":"https:\/\/transferttexei.wordpress.com\/2021\/08\/09\/day-2-changes-for-components-in-winter-21-texeiadventcalendar\/"},"modified":"2024-04-17T16:45:46","modified_gmt":"2024-04-17T14:45:46","slug":"day-2-changes-for-components-in-winter-21-texeiadventcalendar","status":"publish","type":"post","link":"https:\/\/texei.com\/en\/salesforce-news\/day-2-changes-for-components-in-winter-21-texeiadventcalendar\/","title":{"rendered":"Day 2\u00a0: Changes for components in Winter 21 #TexeiAdventCalendar"},"content":{"rendered":"\r\n

Hi everyone, for today, i will bring to light some new attributes you can now use since the winter release: description property in combobox\u00a0. I hope you had a great time yesterday with J\u00e9r\u00e9my VIAL<\/a>\u2019s article, in case you missed it, you can find it here<\/a> and test your security skills with LWC.<\/p>\r\n\r\n\r\n\r\n

And now ladies and gentlemen, let\u2019s start our ceremony and let the show begins.<\/p>\r\n\r\n\r\n\r\n

\u2026 And the oscar goes to\u00a0\u2026 description property in combobox\u00a0\u2026<\/h3>\r\n\r\n\r\n\r\n

I choose this novelty because I think it could be helpful to define the values of some picklists without using helptext. For sure we are not going to use that functionality in a \u201cnew, open, closed\u201d picklist but for trickiest values.<\/p>\r\n\r\n\r\n\r\n

This new property is for the options<\/code> attribute in lightning:combobox (Aura) and you can use it in LWC too.<\/p>\r\n\r\n\r\n\r\n

Here is the definition of description property\u00a0:<\/p>\r\n\r\n\r\n\r\n

description<\/em><\/strong>\u00a0: Defines descriptive text for a list item. The descriptive text displays below the label of the list item. When adding descriptions, specify a description for each item in a list. <\/em>If some items are missing descriptions, the text of the items can be misaligned.<\/em><\/strong><\/p>\r\n\r\n\r\n\r\n

Here\u2019s an example using the description<\/code> property in a component\u2019s JavaScript:<\/p>\r\n\r\n\r\n\r\n

 var options = [\r\n        {value: 'OfCourse', label: 'Of course', description<\/strong>: 'I\\'m an angel'},\r\n        {value: 'NotReally', label: 'Not Really', description<\/strong>: 'Some sympathy for the Devil'},\r\n        {value: 'isReal', label: 'Is Santa Real ? ', description<\/strong>: 'The truth hurts...'}\r\n     ];<\/code><\/pre>\r\n\r\n\r\n\r\n
And for the component, you can use lightning:combobox as usual\u00a0:<\/p>\r\n\r\n\r\n\r\n
\"description<\/figure>\r\n\r\n\r\n\r\n
And Voila\u00a0!, you have some description for your picklist values\u00a0!<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\u2026 the Award for Best <\/em><\/strong>Supporting Actor goes to\u00a0\u2026 inputAddress\u00a0\u2026<\/em><\/strong><\/h3>\r\n\r\n\r\n\r\n
I selected this second to be in the continuity of the description property. It will help us to be more precise on what we are waiting for from the user. Sometimes when users are not used to work in English they may be lost and add a place holder like \u201cExample\u00a0: Ile de France\u201d for the province field, can be useful. Futhermore you can, once again, clarify fields without using the helptext and bypass a useless click.<\/p>\r\n\r\n\r\n\r\n
Like the description property, you can use it in Aura components and Lighning Web components.<\/p>\r\n\r\n\r\n\r\n
Here is the attributes definition you will find in release note<\/p>\r\n\r\n\r\n\r\n
The following attributes are new.<\/em><\/p>\r\n\r\n\r\n\r\n