I want to learn new techniques to show business information to my user.
I'm working in a management system that is a web aplication and it's been writen using MVC Razor .NET, Entity Framework and Angular JS.
In a particular page my client wants to see a bunch of information and he's used to use excel, so he asked me to make a table to keep the excel similarity. BUT here is the point I want to improve him experience.
I dont want to use tables, because it is a lot of information (at least 15 columns), I know that I can have some column selector so the user can choice what columns he wants to see and that kind of stuff but the problem is that is very import to him see all informations right away.
I wonder what kind of UX techniques, methods or frameworks I can use to give him a better experience.
Thank you.
That's what tables are meant for. If you are looking to make it clean and easy to manage I would use bootstrap and maybe a jquery plugin like the following:
Bootstrap Example
http://getbootstrap.com/css/#tables
http://www.datatables.net/
Related
Looking for some guidance as I am struggling here.
As someone who spent many years developing ASP.NET applications - that has been out of the game for 3-4 years, I am struggling to pick up the latest approaches. Probably as a result of a decade of experience.
My ASP.NET in the past was built using stored procedure calls, and the GUI was built using hand-coded HTML and JavaScript. I used JavaScript to emulate Ajax type functionality (before it was really a well known thing), and also would at times use XSLT to separate presentation from code.
Now, I am trying to move to MVC 5. It's not intuitive to me, and the few popular tutorials out there seem to be doing things that I don't want to do. For example, they are connecting to a simple table through EF, and allowing a user to view, edit or create items.
I'm looking for some basic things:
How do I get data from a stored procedure into some form of a view (GridView, or ListView, etc) - Using a controller, a View, a stored procedure as the data source (using Entity Framework? When i try DB First, and select to include procedures, I can't find them anywhere)
I'm going to want to allow them to override the value in one column. This would be stored down in the database as a different field.
This stuff was always very simple using basic web forms, but I can't find a tutorial that allows me to do anything other than just edit an existing table using EF - which isn't what I want to do. So tempted to just go back to the old fashioned way ...
This is one tutorial that was making sense to me, until it jumped into the code first approach on the database, where it went off the path from what I was looking to do:
http://www.asp.net/mvc/overview/getting-started/introduction/getting-started
Here was another one:
http://www.asp.net/mvc/overview/getting-started/database-first-development/generating-views
But this one was also different than what I was hoping to do.
I wish I wasn't so short on time with this project.
Thanks for any guidance.
You may better wait for ASP.NET 5/vNext/MVC6 release and don't waste your time on MVC5. If your project relies on SQL and works well do not use Entity Framework at all.
I'm trying to achieve a relatively easy goal: create a simple cross-platform CRM app to manage contacts/customers and their relations with companies. At the current state I'm fairly confused on how to approach this (after some early motivational success).
After half a year of Objective-C and iOS development under my belt I wanted to get more serious and start on a real app project, which would be the mentioned CRM app. Then I heard about PhoneGap, tried it out and was very impressed. From there on it was clear to me that my app should be cross-platform.
To have a better understanding of what I'm trying to achieve, here are some details about the "requirements":
Simple data model, 5 or 6 entities total. One-to-Many and Many-to-Many relationships.
Have a tab-bar widget to quickly toggle between companies, clients, etc.
search-as-you-type on listviews
master-detail view behavior for listviews
back buttons on the header, "add/edit" buttons as well. Classical app layout as you would expect.
My first steps lead me to JQuery Mobile for the UI which, at first glance, looked like the perfect candidate to quickly build a UI that fits the requirements and takes off a lot of coding from my hands. The mockup I created worked great on all devices, but then I hit a roadblock: the master=detail view navigation/routing. I had no clue how it's supposed to work and the JQuery Mobile docs don't supply an answer or best-practice for that. I figured out that I might be able to just pass an "id" in a querystring and read it on the details view. That worked to some extent, but only when the page is in an external file (detailsview.html?id=3) and not just an internal one (#detailsview?id=3). And even then I experienced some odd behavior when reading the value from the querystring on the pageshow event. Anyway, all this tinkering with logic and design led me to the clue that there must be a better and more organized approach, something like MVC. And apparently there is, namely backbone.js and Angular.js (and ember.js etc.) that come with decent deep-linking. Some googling told me that Angular.js might be a better fit for me since it comes with 2-way data-binding and makes me write less code, which is always appreciated.
But then there's the problem of a functional overlap between JQuery Mobile and Angular.js since JQuery Mobile has it's own routing capabilities. I could disable that part I guess, but I would probably lose the page transitions in the process (no more "pages" in the index.html)? I found topcoat as an alternative for the UI but it currently lacks a much needed/wanted tab-bar widget as it seems. Just as Twitter Bootstrap which seems to lack it as well.
And I haven't even touched persistent storage yet! The PhoneGap API provides storage capabilities but after some years with nice ORM implementations like Hibernate, Entity Framework and Core Data I want something more "natural" than pure SQL. On the other hand, pure SQL might be doable since the scope of the project is somewhat limited. So I came across JayData but have't tried it yet. Since Angular.js seems to prefer data input in JSON format, maybe Lawnchair.js might be a good idea? I looked into it but I couldn't quickly find out how to reference relations and/or objects in a traditional way. My learning curve aside, is lawnchair.js a good way at all to store relational data? Or CouchDB from a server perspective? Most of the examples I found only stored non-related data or contained arrays not referencing other objects. I guess all it needs is storing the object identifiers in those arrays, but how to do auto-create, auto-increment them and make sure that they're unique?
I would greatly appreciate your thoughts, comments and a little guidance on this :)!
Thanks a lot!
During the last weeks I was playing around with a bunch of storage and UI solutions, the ones that I settled with are lawnchair.js, JQuery Mobile and some other things like Handlebars.js for templating. They are fairly simple to use and exactly what I needed.
To store my JSONs I created Lawnchairs like this:
var clients = new Lawnchair({
name: 'clients'
}, function (store) {
// I don't really need the callback here
});
Lawnchair's JSON based storage makes it simple and intuitive to store your data directly in your javascript code with a single line:
clients.save({firstName: "Jason", lastName: "Bourne", ...});
This will also fully automagically create a unique key for you to access the object later. Big bonus that wasn't mentioned anywhere! You could create and define your own key, but for my purpose the auto-generated one fits perfect.
To create realtionships with your other Lawnchairs, like "companies", you could add the key to the querystring, read it on the detailspage, and add the key to the company's property you want, like:
myJSONclient = clients.get(SuperLongAutoGeneratedKeyReadFromAueryString);
// Probably do some stuff with the object
// Add the key to the current company object
currentCompany.bestCustomer = myJSONclient.key;
// save it
companies.save(currentCompany);
That's all there is to it :)!
This may sound like a dumb question on the surface, but why does the Hot Towel SPA Template include Breeze at all?
I've been spending the last few days learning Hot Towel and its dependencies, and as far as I can tell, nothing in the template actually uses Breeze. Perhaps that is going to change with some future release?
Sure, Breeze is a good library. But it's bound to CRUD methodology and requires you design your ApiControllers a particular way. (Metadata, SaveChanges, etc.) see here
It also guides you to Entity Framework. While this is more of a soft-dependency, since Breeze also shows a sample without it, it still guides you down a similar pattern of implementation using a modified repository pattern.
If you are using a NoSQL datastore, or CQRS patterns instead of CRUD, then Breeze becomes very difficult to use. There are alternative libraries for data access that work well in this style, such as AmplifyJS.
But the rest of Hot Towel is excellent! I especially like Durandal. So the question begs, if the template isn't actually doing any data access - why include any data access component at all? It would be better to ship it without Breeze, and if the end-user wants to use Breeze, or Amplify, or whatever - then so be it. The rest of Hot Towel would continue to shine as a great SPA implementation.
Matt - Good question. Since I created it I guess I should answer :)
When I built the template I had a focus on providing enough to get folks going with the right tools, and just enough starter code to guide the way. I did not want anyone ripping out code. I'm not a fan of templates that start you down a path and make you remove tons of files and code and change direction. Those are samples.
Samples are good. In fact, samples can be excellent (like the other templates, which I feel are more like samples). Those serve another purpose: to show how you can do things.
Back to the Hot Towel template ...if I include code that uses Breeze, I would be tempted to add a datacontext.js and a model.js on the client. They would contain data access code and code to extend the models on the client. Then I would be tempted to add a controller, some server side models, an ORM and a database. Once there, I'd want to use the data in multiple screens, which leads me to more Knockout and caching with Breeze. Then I might be tempted to add editing, which would lead to change tracking. Soon I have a full blown app. Or more conservatively, I have a sample again. While these approaches would provide more guidance on how to put these together, they would not help you "get started" with a template where you can just start building and adding your own code. If I stop short of some of these features, it's still walking down a road that requires you to change how I did it.
As it stands today, HotTowel is pretty darn close to a template in the truest sense. You create a new project and you are off and adding your own code.
You could argue (and you may be) that Breeze shouldn't be in there since I don't use it in the template. Nor do I use moment.js, BTW. However, I argue that they are both excellent libraries that I would not want to build a CRUD based SPA without them. Breeze is flexible, as you suggest, so you don't have to walk a specific path.
The best way to understand the value of Breeze is to build an app that has its features but without Breeze. Then you can see how much code that takes and how involved it is. For one such example, see my intermediate level SPA course at Pluralsight where I do exactly this: http://jpapa.me/spaps
So you ask "why Breeze?" ... because I strongly recommend it for building a SPA.
Thanks for asking and good luck !
Thanks for asking the question.
John, as author of HT, has offered an answer. I, as a principal of the Breeze project, am inclined to agree with him :)
HotTowel generates a foundation for you to build upon. It is not the building itself.
It is a foundation intended for a specific kind of application, a CRUD application based on a specific set of cooperating JavaScript and ASP.NET technologies. Breeze is a contributor ... but not the only one. Knockout, with its MVVM design and 2-way data binding, is particularly well-suited to the data-entry tasks typical of CRUD apps.
Of course there are other kinds of SPAs. There's an important class of apps that mostly present information and accept little user input. Such apps don't benefit as much from data binding and the people who write them can get pretty hostile about data binding in general and KO in particular.
My point is that HT targets a particular class of application ... one that happens to be immensely successful at least when measured by sustained popularity. It delivers the goods for people who build those apps. It may not be the right starting place for other kinds of apps.
It is true that the easy road to Breeze runs through Web API, EF, and a relational database. Take those away, and you may writing more code on the server (and a little more on the client). That may be the perfect trade-off for you.
The authors of Breeze would like to make that path easier. I don't think BreezeJS makes it harder. I don't understand your statement "Breeze becomes very difficult to use." Have you tried it?
Your client can communicate with any HTTP resource in any manner you chose. It is pretty easy to use existing Web API controllers (albeit easier with Breeze Web API controllers). You can use amplify.js if you prefer (btw, you can tell Breeze to make AJAX calls with amplify). You don't even have to use the Breeze EntityManager to query and save data if you don't want to.
The rest of BreezeJS may still have value for you. There remains plenty of work to do after you've figured out how you'll retrieve and store data and whether you prefer Entity-ChangeSet style or Command/Query style.
You'll have to find answers to these questions:
How will you shape the raw JSON data into bindable objects?
How will you hold on to these objects and share them across multiple screens without making redundant round-trips to the server?
How will you navigate from one object to a related object as you do when binding an Address to a combobox of StatesAndProvinces?
How will you track changes?
How will you validate them?
How will you store some or all of the data in local storage when the app "tombstones"?
Breeze can help with these chores even if you don't want it to query and save for you.
And if you're answer remains "I'll do all of that myself, thank you" ... well, removing Breeze from your HotTowel project is as easy as:
Uninstall-Package breeze.webapi
At the moment I am building a big project using:
ASP.Net MVC 4
jQuery (With some extra libraries)
Castle ActiveRecord (based on NHibernate)
Implemented users and roles using .Net Membership Provider
I built almost all the website, but some very relevant parts are missing still and I noticed that this CMS supports
ASP.Net MVC and NHibernate, and have almost all the features that I need already implemented.
The features that I still need to implement are:
Internal Search Engine
Comments
Version of content
Chat betwwen users
Users Profiles Page (Something like a very basic social network)
Forum
SEO
I don't know if is harder to use the CMS or if is better to add the features one by one manually.
I am worried about the time I spend learning and adapting to Orchard is the same time I would spent adding this
features manually.
Basically, the question is:
Should I move my solution to Orchard CMS or add everything manually ?
You can't just move your solution to Orchard, you could but i won't recommend it. Orchard is still MVC 3 at the base and that way most should work if you just move your solution including the database etc. But if you ask me, spending time to add the features manually is the way u should go.
In the Orchard Galery you can find existing many modules
Internal Search Engine
Lucene (Fully functional - Writen by the Orchard Team)
Comments
Already exists in the Orchard Core Module
Version of content
Already exists in the Orchard Framework functionalty
Users Profiles Page
Profile (Fully functional? Or at least good enough as example)
SEO
Several modules
Only 2 features u will have to write yourself
Chat between users
I can't find any example code for this, but I know Piotr Szmyd has tested SignalR inside a Orchard Module which, I think, will be usefull for a Chat module. Demo is here.
Forum
Nicholas Mayne made a start of a forum module which can be used as example or starting point, maybe you can help him extent it? Currently it's sort of a pre-alpha version :(
+1 to rfcdejon's answer. I ported my current project to Orchard after at 50-60% complete. I wish I had done it sooner due to the learning curve and time to integrate all the stuff I had already written, but overall it was the right choice.
If you have significant data already set up you should account for the extra time it will take to port that into Orchard. But if you are making an app from scratch with very little existing data that would make the switch to Orchard easier. Orchard is a great choice for anyone looking for a .NET CMS that supports MVC.
Some things to keep in mind:
Features you've already built will have to be converted into Orchard content types/parts in order to take advantage of things that come out of the box with Orchard, like search, comments, versioning, etc.
Orchard has its own users/roles system, so you might have to do some work to find a module for what you're already using, or override Orchard's user/membership system yourself.
Your entire app will have to become an Orchard app, and your existing MVC stuff will have to convert into an Orchard module. Existing data access code will have to be wrapped inside a using (new TransactionScope(TransactionScopeOption.Suppress)) {...}
Forums project has started but isn't done, so you will either be banking that it will finish in time for you to use it, or that you will be able to help get it working.
Lot's (if not most) of the current Web frameworks provide an admin module for basic CRUD operations, but I find the ones I know usually very limited...
So, my question is, which Web framework out there provide the best administration backend?
By the best, I mean namely:
Domain objects that can be heavily polymorphic. Attributes/relations defined in a class appear when editing a record/instance of any of it's subclasses (and sub-subclasses, and sub-sub-subclasses, etc).
Abstract classes. It's ok to have abstract classes anywhere in the domain classes' hierarchy. Their attributes and relations also show in the records/instances of all descending classes.
Relations. Allow to edit (out-of-the-box) the records/instances that have many-to-many relations, and relations with associative classes (e.g., django calls these intermediate models)
Extension. Allow to extend the admin so that we can use our own "UI controls" for specific domain objects. Some information is just too "exquisite" for an out-of-the-box form-based control to work in a suitable way.
UI Components. Instead of having to choose between using all of it or none of it, it'd be nice to have generic "UI controls" that one could reuse from within any page of the website, to edit specific domain objects.
Programming language is not an issue at this point, although I lean towards the languages (or frameworks) that allow me to express the most information at the domain model level (and that the admin module can then use to give me a richer UI).
I've been playing with Active Admin and Rails Admin for a couple of Rails 3.1 projects I am working on. While both are nice, I've migrated more and more to Rails Admin. I've found it easy to customize, it does a very nice job with associated models, and has a great default UI.
Rails Admin
Definitely good old WebObjects with it rule system called DirectToWeb. It generates everything at runtime based on rules. By default it can display all your entity's properties and relationships.
I guess that every current web framework will offer something like scaffolding, but often times, the work begins as soon as you change your model.
Check out this post and this teaser about the latest DirectToWeb-based framework, ERModern. You use nearly zero code for what you see in the video and you can build entire applications around it. It was sponsored by the iTunes team.
Edit for your bullet points:
Abstract classes and domain objects that can be heavily polymorphic - You handle these using rules.
Editing relations - No problem, it only depends on the design of your components. If you use ERModern, you get this for free.
Generic UI components - This is exactly how DirectToWeb works. You use (or define your own) generic components that display themselves according to the current entity (an object inheriting from EOEnterpriseObject) and the rules that fired for the current state (the D2WContext, essentially a big dictionary).
You can see all of this in action in the 45 minutes long ERModern Intro Video.
This isn't an easy question to answer.
You never specify what language you want to use, and you named some features, but how much of these features do you want.
I mean I could suggest a number of frameworks and tools for ASP.Net MVC or Web Forms but what if you're a PHP developer or a Java developer?
I could suggest SharePoint (and I generally dislike sharepoint, but everything you want is in SharePoint), but then the question to ask is.
How much flexibility and freedom do you want to customize or how much do you want the framework to do and you just be a code monkey.
So I will give you just my opinion.
I use ASP.Net MVC for my custom apps. It does all of what you want and allows me the most freedom to create and extend with tools if I so to do so. Plus out of the box there's a user databse with roles I can easily create out of the boss once I run the app for the first time.
Also CRUD is completely easy and straight forward out of the box. just check it out http://www.asp.net/mvc there's a tutorial section that goes through what you're wanting that you could complete in half a day.
Then there are some OR/M like NHibernate, Entity Framework, Subsonic use www.google.com to find tutorials for these if you're not familiar with them.
Then there's SharePoint it has a learning curve but once you get past it it's pretty straight forward as it's easy to pinpoint bugs, focus on the business logic and not worry aobut data base schema (as you don't even need to touch a database).
I love WebObjects.
WebObjects -> EntityModeler -> Wonder -> ERD2WModernLook -> ERAttachment --> ERRest
Bam. Done.