Skuid NLX, SFX, & EXP

I posted an idea previously about having responsive grids collapse to tabs if the entire grid is too wide for the frame as an option to wrapping to the next line. An additional idea is to allow any single division to be collapsible. When collapsed, the division would shrink from its original width down to 5 or 10px wide and display an expand icon that the user could click to expand the division back to its original width. I use an application that utilizes this and it is really handy when you want 3 divisions, but the main division is best used at full screen width. So you could have a left division that is 25% of the screen width, a right division that is 25% of screen width, and a center division that is 50% of screen width, but then if you collapse the left and right divisions, the center expands to take up their width.

Finally implemented jQuery .sortable() to enable drag-and-drop reordering on a skuid table. turned out to be much simpler than I expected! I have an Order__c field on the object which starts at index 1, and I’m just updating that field after every reorder.Here’s my inline javascript:(function(skuid){ var $ = skuid.$; $(document.body).one(‘pageload’,function(){ var component = skuid.$C(‘MyComponentId’),    listContents = component && component.element.find(‘.nx-list-contents’); listContents.sortable({    placeholder: “ui-state-highlight”,    stop: function( event, ui ) {        var data = ui.item.data(‘object’),            model = data.list.model,            movedRow = data.row,           target = $(event.target);                target.children().each(function(index,tr){            var row =  $(tr).data(‘object’).row,                order = row.Order__c;           if (index + 1 !== order) {               model.updateRow(row,‘Order__c’,index+1,{initiatorId:component._GUID});    

With a new design and new content, we're happy to debut developer.skuid.com.You'll find the Skuid API Reference guide (with new API calls!), as well as an expanding library of guides and documentation.We are revamping our help articles, so everything you see is under development. Check back regularly for updates!  Kick the tires and tell us what you think. We welcome feedback at documentation@skuid.com!

Would be super awesome to give access to all available row actions when right-clicking on any row in a table.

As another option to formulas for condition values in this post, I could use also make use of the following:{{$Dates.CurrentYear}}

There are times when a component registered to a model doesn’t have rows event when the model does. ie. context is set, condition added to xmlMy specific use case has to do with All Day events not showing up in the Calendar component. So I decided to display a Table with a manually added condition to show only All Day Events above the Calendar component.I’ll likely be able to use a snippet to do this, but still would be great to do this with declarative setup.

var $ = skuid.$, field = arguments[0], hasChanged = field.model.changes[field.row.Id] && field.model.changes[field.row.Id][field.id]; switch(field.mode) { case 'read': if (field.row.Id.length >= 15 && !hasChanged) { skuid.ui.fieldRenderers[field.metadata.displaytype].read(field, arguments[1]); } else { skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, arguments[1]); } break; case 'readonly': skuid.ui.fieldRenderers[field.metadata.displaytype].read(field, arguments[1]); break; case 'edit': skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, arguments[1]); }

Question/IdeaIs it possible to display which model has unsaved changes when you try to leave a page? Some pages can be pretty complex and its difficult to identify which model didn’t get saved/canceled. It would be very helpful to show this in the console. I would prefer the console to show the name of the model (maybe even a list of the unsaved changes on that model) than the window alert because the end user does not necessarily need to know.My current way of adding a save button for each model to see which one is still enabled isn’t very efficient.

First off, it would be great if sorting of a table and chart can be set to the order of picklist values. The most obvious case of this is on the StageName field in Opportunities. Here’s a workaround snippet for the following use case: Basic model on the Opportunities object which is then used in a Chart where {{StageName}} is used to split the values. Column Chart called “Opps by Qtr by Stage”. Before After // this snippet has been created in order to sort the series in the chart by the stage order // in the sales process assigned to the Record Type var chartObj = arguments[0], Opportunities = skuid.$M('Opportunities'), StageName, sortedSeries= [], $ = skuid.$; // to get the sort order, we need to find the Stage field metadata in the Opportunities models list of fields $.each(Opportunities.fields, function(f,field){ if (field.id === "StageName"){ StageName = field; return false; } }); // now use this field to create a temporary array to replace the current series // loop through entrie

The responsive grid is great. Right now it will collapse smaller and smaller down to the minimum defined width or the width of the content in the division. Once down to that size, it wraps the right most grid down. This is great, but it would be nice if there was a grid option to “tab” the division instead of “Wrap” the divisions. If the screen size gets too narrow to display all divisions in a single horizontal line, then instead of wrapping down to the next line, it would instead change the divisions into tabs.

I have a series of tables that currently are all on their own pages but using the same or similar models. I’d like to be able “clone” each of the tables within your Tab Set feature as tables on a tab instead of a table on it’s own page. Unfortunately, this means I either have to build from scratch or get a developer to help me with the XML. Of course, the latter is preferable to rebuilding from scratch, however ideally the tool would allow me to save my table as a reusable item that I could add in from the new Tab Set on a new page.

This idea stems from the conversation/analysis at https://community.skuid.com/t/columnset-rendering-issues-as-of-8-15-1-which-contained-sku…Field Editors currently are “hardcoded” to a 40%/60% split of the label/value columns.  This presents several issues including primarily that it is difficult (nearly impossible) to provide a fully responsive layout of the label & value columns.  The percentages can be overridden with CSS rules but given the way the HTML is emitted, you’re forced to having “fixed” widths using % or pixels, etc.Would like to see Field Editors enhanced to support full Responsive capabilities.  This could be accomplished in the following manner:1) Expose a property for label column and value column2) For each property, provide a “Fixed Width”, “Fit to Content” and “Flexible Width” option3) Default the Label column to fixed 40% and Value column to fixed 60% for backwards compatThe behavior would behave the same way that a Responsive Grid with two columns would behav

I was tasked with making a small quality of life change to our org that would make entering expressions or big data easier on our users, and after some tinkering, I came up with a field renderer that does just that.This snippet leverages the really awesome math.js library to allow you to enter complex expressions into any field it’s assigned to, and with a key press (currently Tab or Enter, but it’s easily changed), evaluates the current expression if it’s valid. The snippet will keep track of what you enter and let you know what is and isn’t considered a valid expression.Because the snippet uses math.js, it can evaluate anything the library can. This includes powerful stuff like complex expressions involving BEDMAS, or matrix math, and extends to obscure but really cool stuff like unit conversion.The snippet signifies fields it’s attached by sticking a small calculator icon on it, which pulls its color from the Skuid theme currently in use.Installation & DemoPlease visit https://g

See title. Use case:

It would be handy for user to be able to sort tables based on the output of ui-only formula fields. At least when those fields can be easily sorted.

This one started off as a simple task I had to do, and ended up being rather complicated. I had to make icons placed on a skuid page redirect, when clicked, to another page. Simple enough right? Well I would have liked to use an image component, and run Action Framework actions when the image was clicked, however the image component can’t currently do that. I suppose I could have given the images a special class and jQueried an event handler onto them, but that would have been messy… So I did it initially with a stock Template component, with the “Allow HTML” option checked, adding a href around my img tag pointing to my page’s URL. I was satisfied to some extent with that. There was quite a bit of HTML clutter in the template though, and despite the href giving me the nice mouse-over indicator in chrome like so: (bottom left of browser window when you hover over a link), the whole thing wasn’t very declarative, and still didn’t accommodate Action Framework Events. So, simply, I made

Hello everyoneWe are still working with the skuid calendar component. We had to display multiple calendars at once (All Day Events and Normal Events) because they display a different daterange. However, we need to connect them together, so they always display the same daterange.We already got it working for the previous and next day/week/month buttons. But we also had to expose the normally hidden datepicker for quick navigation and there lies my problem. A selected Date will not notify any listeners to changes it has made.Therefore my intention was to add a jQuery datepicker onSelect function to fire off a function which sets the second calendar on the same date, as well as firing off a snippet i need for a different purpose every time i select a new date with the datepicker.However, my onSelect function does not seem to get accepted at all. $.datepicker.onSelect(function(dateText, inst){ console.log("debug"); }); Would be really neet, if we had some way to kick off actions when some

Currently the page include component requires the selection of a page by name and module, and passes the module parameter along with the page name. It would be handy if page includes required only a page name to be specified, and selected the Module based on the same criteria that URL redirects use.That way, we could release a “Stock” version of our app, and could customize specific included pages for particular customers by placing them in different modules.  Then if any of the customized pages are used as page includes, the include component would automatically pick up the custom page instead of the stock page, without requiring us to find every instance of the include component and update them.

It would be very convenient to have multiselect options similar to how Excel handles it. Right now, even if you turn off auto-filtering, you have to type in your keyword and select each item. It also doesn’t show you in the list of options which ones you’ve already selected. Compare to Excel where you can select multiple items after typing in the keyword very easily. This would be a huge time saver when trying to filter based on many similar named items.

When a Queue Item Action set to “None”, after clicking an item in queue, the class ‘nx-queue-item-selected’ is not added to the nx-queue-item. The item is being selected, it’s just there is no action to take when its selected. Notes A workaround is to set the action to Run Snippet leaving the snippet name blank. This is not a viable long term solution as when the “next developer” looks at this page and config, he/she will think “Someone forgot to specify the Snippet name.” There is another issue related to Queue item selection at https://community.skuid.com/t/selected-property-of-queue-items-not-being-set?rfm=1&to… Steps to reproduce: Create page using XML below Preview page Click any item in queue Expected Behavior Queue Item is given the nx-queue-item-selected class Actual Behavior nx-queue-item-selected not applied Sample Page <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account"> <models&gt

Hi,I think it could be  practical to have versions for theme editor as well.In many cases I wanted to revert changes … and had to do it manuallyThx