I was really excited to use the new Lightning DataTables Component with the release of Winter 18. I have implemented them in a new project that needs to be functional on mobile and desktop. As the LDS (lightning design system) and LEX (lightning experience) are mobile first, responsive UX frameworks I assumed the UX would be seamless on both desktop and mobile. I was wrong and it was not until after I opened a case with SFDC and 2 weeks of back and forth that I get an answer from the SFDC tier 3 support stating that the DataTables are not mobile ready because they are leveraging the LDS. Now, first off I am not accepting this answer because I have used LDS to style tables that work swimmingly on mobile. I have said as much to the ticket owner at SFDC and will see what they say. To give a description of the problem—
When the user scrolls on mobile the header row disappears or partially disappears… it comes back if you tap it but then disappears again when you scroll. This is not the only issue I have fount with the DataTable component.
Sort is weird… it sorts alright but once you sort one column the next column you sort seems to be dependent on the initially sorted column.
Column sizing turned on seems to break the responsive table.
Of course the aforementioned header on mobile issue.
If I had known these things I would have rolled my own table because another big limitation (that I did know up front) is that DataTables does not allow for input elements.
Here is a list of new and changed Lightning Components for Winter 18. I am really excited about the dueling picklist, the native slider (hopefully it is mobile friendly) and the added notifications library!
The communication between Lightning Components and Apex can at first seem a little unwieldy when compared to the close coupling between Apex and Visualforce.
With a little coaxing and massaging however, Apex can be brought to obey your beautiful Lightning stylings even when it throws a nasty exception. I found myself frustrated by the murky handling of errors in my try — catch blocks at first. That was until I discovered the beauty of throw new AuraHandledException()!
I had already wired up my modal to let the user know their query had returned no data but until discovery of the AuraHandledException I was not finding a friendly way to insert the likes of callout errors (500, 400, etc) into my pretty modal. I guess I should not have been surprised when throw new AuraHandledException() did exactly what it said it did! In my data handling helper I was already trying to catch the error in the response but because my errors were unhandled they were creating those ugly red Lightning error pop-ups generated by the system.
The code below is not a complete implementation but is intended to give you a sense of the important parts which are:
1. In your try – catch block on your server call use throw new AuraHandledException()!
2. Wherever you are processing your response, in my case the FetchDataHelper handle your error by passing it to your display prompt/modal.
3. I am creating a modal dynamically in the parent component, the dataDisplayHelper creates the modal with the appropriate error. Credit to Mike Topalovich for the modal code(not included) and the dataFetch code!. You can find lots of examples online for modal creation — it is fairly straightforward.
4. Ultimately what you end up with is graceful error handling which makes your users happy and not stressed out by your application. Also, it makes troubleshooting much friendlier should someone log a defect (and hopefully add a screenshot) after you go to production…. that never happens.
For a project I am currently working on I wanted to implement a dynamic input field that set it’s body based on the user’s selection of the type of query they are making. There are 6 possible fields the user can query on and these 6 fields can be mapped to 3 types of queries — Date Picker, Date Rage and Input Text. Using what I have learned in dev 601 with Mike Topalovich (kudos again to Mike), I have been actively pairing down and generic-izing (?) every component I build. So this solution needed to be both generic to the given situation and also flexible enough to accommodate the variety of options needed. I ended up creating a simple component to hold the dynamic input field which has optional parameters of “name” and “dynamicSetting”. I wasn’t able to pass the change value to the dynamicSetting on the created component so I have an attribute in the parent that controls the colored label showing the value of the date slider. This is also the value that would be passed to the APEX controller to execute the query.
I have been developing with the SFDC platform for several years. In this time I have surmounted many a learning curve and devised copious work arounds for dead ends that I have run into because of system limitations. These challenges have been exciting to overcome but have often meant adding code that I knew I would one day be back to refactor. Salesforce has been sold as a clicks not code development platform but as anyone who has implemented SFDC knows there is a limit to where configuration alone can take you. I think this has created divisions between admins and developers. There has not been until now, a way to handoff your beautifully written and toiled over code solutions to your admin wizard friends. Along came Lightning and everything changes…
Adoption is still low because so many users are married to their Classic UI and are not inclined to invest in making the switch or are not sure where to begin. I think that Lightning adoption will grow as more developers understand the power of the framework. I am taking the Dev 601 course this week with Mike Topalovich. Although I have been building some Lightning Components over the past few months, I am finding lots of good nuggets that I have not yet discovered in this training. Kudos to Mike for his depth of knowledge on this subject and for keeping some levity through the tech talk!
Here are some of my favorite learnings so far:
Components are your lego blocks… developing with SFDC is now modular by design!
<Lightning:layout> component gives you the Grid for free! Crowds go wild… especially those who have toiled over SLDS styling for days….
<aura:if> is magical…. I can see use cases with this involving custom component configuration by admins.
Expose your components for use by your Admin friends and make them configurable by adding a Design Resource
LEX is still a work in progress but there is something special about the SFDC developer community…. (just look at StackOverflow if you don’t believe me) I know that the innovation of folks working with SFDC LEX will grow exponentially now that we have just been given this awesome new set of tools for our toolkit!
The engineer at Google who wrote the sexist manifesto about why people without a Y chromosome are less fit for technical jobs is unfortunately, not alone in his small-mindedness. All humans who are not white males —that fit into one of the desired buckets for what white maleness should look like in America— are aware that there are people around us with hate in their hearts and smallness in their heads. The problem is that in the past year the conversation has been brought to the fore as certain political factions and certain former reality tv stars have taken over a certain house that is white and also near to Delaware… read between the lines folks. There are some who might argue that it is healthy to bring the discussion to light. I would argue that you should leave that pimple alone and let the puss stay where it is otherwise you might end up with an ugly scar. Hate, racism and bigotry are facets of our animalistic-lizard-brain tendency toward tribalism and have always been floating around in the hearts and minds of human beings. The trigger for activating the small-mindedness can be anything from rejection, repressed sexuality, or just simple ignorance. To argue that we should allow ourselves to indulge these base and lesser instincts is to suggest that we should plunge ourselves back into the pages of ancient history. We have come far but we must actively ensure that our progress is guarded and tended otherwise the weeds will encroach and the crop will be spoiled. Civility is not just burying, it is not about political correctness or liberal elitism. Civility is about knowing that one’s own opinion is not the truth and maintaining an openness to others because it is good for them and good for ourselves and ultimately good for humanity when we create space for diverse thought and education. Free speech is not the same as hate speech. Having a conversation about diversity does not mean spewing your poisoned inner workings to the world. Most importantly, dialogue that encourages diversity must come from a place of love and not from fear.
We recently went live with a team on Lightning only. Everything seemed to be going okay until the New Quote button disappeared suddenly from the quote related list on Opportunity on SF1. The button was there in LEX (Lightning Experience) but on mobile devices it was gone, just gone. And the worst part was it had been there the week before. I got on the SFDC help desk red phone and once I had my case elevated to tier 2, I had a very helpful rep research the issue for me. Come to find out SFDC R&D had removed the button from SF1 without notice because of some bugs they were seeing.
Well, not to be one to give up that easily I created a workaround. I was told the only workaround would be to create a Visualforce page which seemed really heavy handed, especially if SFDC is going to fix the issue sometime in the future.
Note, this workaround is designed for Lightning and SF1. If you are using classic then you would be better off going the route of a Visualforce page. Our users are going live on Lightning and are heavy mobile users so this functionality is critical for them. Enough talking and let’s get to the code…
This is a Lightning Component Action which means that once you have created the component you will need to create a Lightning Action that will use the code add the action to your page layout. Click into the links below to see the code in my GitHub repo. Note that you will need to wire up your own field validation (I have not added that as of yet). Happy coding!