fbpx
Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 

We are heavilly in Meteor developement (javascript framework) developing a sample apps for testing how framework works in real business environments.

Modern developer is lost in myriads of technologies like jquery, bootstrap, backbone, handlebars, reactive single page applications, and so on. It was hard (for me) to adopt notepad style programming, when once we had gui visual development environment with integrated debugger. I don't know if this is a step forward or step backward. But mainstream goes this way so we dont have many options to choose.

So beside setting Meteor environment (linux platform) we try to create all the requirements for real business app. In business app we need a way to browse data (tables), enter data (forms) and link data. Ok we need also other facilities like reporting, charting and others, but for start we focus on browse, edit and link.

For start we needed a browse facilities. When we first started with Meteor, around version 3.5 i think, there was no facility like https://atmospherejs.com/ that is a repository of meteor packages. Preprogramed solutions that you can embed in your project. Now you have over 1000 packages that you can reuse, and the important part, they are source coded and stored on Github. So we needed a table-browse package, and we started to look at packages. It turned out that there are over 20 solutions for this problem, but neither one suited our purpose, a simple table browsing with paging and filtering data. Some packages on atmospherejs.com are having bugs, and are not working properly, some are developed with noncompatible ui frameworks, and some are simply overcomplicated to add custom funcionality. My opinion is, if you do not understand the code you are using for business app, you are searching for problems.

Ok, we tried many packages and solutions, and then we developed our own solution. I has simple paging and filtering data facilities. We focused on minimalistic design. First we tried to go in full featured admin template design, but then we realised that we are loosing time with design features that do not add user advantage over simplicistic design.

So we will try so stick with Keep It Simple Desing / KISD.

meteor1

Next step was creating a form to edit data. Again we checked many applications, but they mostly work with simple data entry, with small collections. In business app you typically have large collections like clients, invoices, and others. When you select from any of these collections you need to have some kind of filtering and fetch on demand facilities.

First we created a form with basic data and adding a related documents table in the form. So when opening the form the app has to do filtering related data collections based on currently opened document. Here we faced another problem. If you display the collection in start page in browsing table, and then the same collection, but filtered in edit form, you have to publish the collection twice. You certainly dont want to publish the entire customer collection to clients and filter it on client side. And here is the catch. If you think like sql programmer, you would think ok, I published this query and here is the data. But no! Queries from same collections are merged on client, so you have to query for proper data AGAIN on client!  Ok, we got this solved.

meteor2

But then it comes the real problem, how to enter data and relate it to other documents. In simple words, how to pickup from other collections and link it properly. you cannot simply query for data, cause queries are ASYNCHRONOUS on client. You have to call the method on server, that eventually will return proper data at some point in time.

meteor3

Ok, move on. So we need a picklist like select and not some input with typeahead functionality. Cause we want to link exact document with exact document. We choosed Select2 component, cause it looks nice in Bootstrap. First we needed to find out how to populate select2 based on search text typed in it. We found out that this is an issue with Select2 cause it does not have callback function for this, and beside this it stops propagating all keypress events.

meteor4

We needed to add event handle on body element with filter.

// client / rendered event
$('body').on('keyup',"#select2-drop .select2-search input",function(e) {
search = $("#select2-drop .select2-search input");
query = search.val();
$("#client").empty();
Meteor.call('searchOrg', query, {}, function(err, res) {
if (err) {
console.log(err);
return;
}
$('#client').append( $.map(res, function(v, i){ return $('<option>', { val: v.unid, text: v.name }); }) );console.log("set query");
});
});

// server
Meteor.methods({
searchOrg: function(query, options) { var maxLimit = 50;
options = options || {};// guard against client-side DOS: hard limit to 50
if (options.limit) {
options.limit = Math.min(maxLimit, Math.abs(options.limit));
} else {
options.limit = maxLimit;
}
console.log("query: " + query);
var regex = new RegExp("" + query, "i");
console.log(Organizations.find({name: {$regex: regex}}, options).count());
var n = query.length;
if (n>=1){
return Organizations.find({name: {$regex: regex}}, options).fetch();
} else {
return [];
}
},
});

Nice we needed also to initialize select2 elements and it worked nicely.

$('#client').select2({
allowClear: true,
minimumInputLength: 2,
});

 

Then again it came the catch22. If you have more than one select2 element on page, in our case on page and on modal form, you dont know where you get typing from. And of course you get typing from the wrong select2 element.

So the next thing was to find out how to diferentiate from two select2 elements, and from two input boxes select2 dynamically create. You could not just add an id or class to it, cause it is not there at design time.

You have to add your custom class to dropdownCssClass element of select2 and use this to diferetiate one from another.

$('#client').select2({
allowClear: true,
minimumInputLength: 2,
containerCss : "orgrelclientsel2",
dropdownCssClass: "orgrelclientsel2"
});

and reading data is also a little bit altered.

$('body').on('keyup',"#select2-drop.orgrelclientsel2 .select2-search input",function(e) {
...
search = $("#select2-drop.orgrelclientsel2 .select2-search input");

 

Hope it helps to some other programmer converted to javascript environment.

Gregor Ibic

 

About Us

We specialize and 3 key areas:

InteliDoc business solutions - Cost effective and high-quality software solutions for a wide range of industries and domains.

Engineering of IT infrastructure

Quality hardware and software

News

26 February 2019
24 October 2017
09 May 2017
©2019 Intelicom d.o.o.. All Rights Reserved.

Search