When I started to decorate the table by bootstrap classes like table, table-hover, table-condensed, table-nomargin, table-striped… I expected that bootstrap will have some useful class for awesome responsive behaviour, but NO. Then … I must created some custom solution and here is :

I want to rendered table like this :

to something like this:

The solution is really simple. We need to add only one class to table called e.g. table-specialresponsive and specify special attribute e.g. data-title per cell for new column header which will be displayed in row, when table header th-s will be hidden:

<table class="table table-striped table-specialresponsive">
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td data-title="Column 1">Value 1-1</td>
                    <td data-title="Column 2">Value 1-2</td>
                    <td data-title="Column 3">Value 1-3</td>
                    <td data-title="Column 4">Value 1-4</td>
                </tr>
                <tr>
                    <td data-title="Column 1">Value 2-1</td>
                    <td data-title="Column 2">Value 2-2</td>
                    <td data-title="Column 3">Value 2-3</td>
                    <td data-title="Column 4">Value 2-4</td>
                </tr>
                <tr>
                    <td data-title="Column 1">Value 3-1</td>
                    <td data-title="Column 2">Value 3-2</td>
                    <td data-title="Column 3">Value 3-3</td>
                    <td data-title="Column 4">Value 3-4</td>
                </tr>
            </tbody>
        </table>

@media only screen and (max-width: 768px) {

    .table-specialresponsive > thead,
    .table-specialresponsive > tbody,
    .table-specialresponsive > tbody > tr,
    .table-specialresponsive > thead > tr,
    .table-specialresponsive > tfoot > tr,
    .table-specialresponsive > tbody > tr > td,
    .table-specialresponsive > thead > tr > td,
    .table-specialresponsive > tfoot > tr > td,
    .table-specialresponsive > tbody > tr > th,
    .table-specialresponsive > thead > tr > th,
    .table-specialresponsive > tfoot > tr > th
    {
        display: block;
    }

    .table-specialresponsive thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-specialresponsive tr {
        border-top: 1px solid #ccc;
    }

    .table-specialresponsive > tbody > tr > td,
    .table-specialresponsive > tfoot > tr > td {
        border: none;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

    .table-specialresponsive > tbody > tr > td:before,
    .table-specialresponsive > tfoot > tr > td:before {
        position: absolute;
        left: 6px;
        width: 50%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-title);
    }
}

Responsive table is applicable for screen resolution less then 768 pixels .. and maybe interesting is last line content: attr(data-title) which specify the content which will be apply before every cell.

That's it

Každý deň pribudne na internet veľa nových webových stránok. Či už sa jedná o nové internetové obchody, jednoduché statické stránky, alebo až po rozsiahle firemné portály. Spustenie novej stránky ešte automaticky neznamená, že je aj ľahko vyhladateľná podľa zadaných kľúčových slov. Od spustenia novej webovej stránky môže ubehnúť aj niekoľko týždňov, alebo až mesiacov, pokiaľ vás vyhľadávač začne zobrazovať.

Vyhľadávače si najskôr potrebujú zindexovať nové webové stránky do vlastnej databázy. Tento krok sa dá výrazne urýchliť použitím niektorých metód a samozrejme aj SEO techník. Indexácia vašich stránok/podstránok taktiež neznamená, že teraz ihneď budete ľahko „vyhladateľni“.

Veľa ľudí sa preto obracia na online marketingové agentúry pre urýchlenie a správne nastavenie online reklamnej kampane za dosiahnutím tzv. BOOM efektu, alebo jednoducho pre optimalizáciu stránky samotnej. V skratke povedané „BOOM efekt“ je spustenie vašej reklamnej kampane cez všetky možné internetové kanály súčasne. Všetko avšak závisí od konkrétnych požiadaviek zákazníka. Základné všeobecné tipy a pravidlá pre webstránky na zlepšenie vašej pozície vo vyhľadávačoch znejú:

1. Mať unikátny obsah s pravidelnou aktualizáciou
2. SEO optimalizácia (rôzna úroveň)
3. Sociálne siete (Facebook, Instagram, YouTube, LinkedIn, Blogy ...)
4. Online reklamné kampane (Facebook, Google AdWords, Etarget …)
5. Pravidelné sledovanie správnych metrík (Google Analytics, Webmaster tools a iné)

Vzhľadom na fakt, že Google a iné vyhľadávače používajú množstvo metód pre určenie poradia zobrazovaných stránok a ich takzvaný „vzorec“ teda algoritmus je tajný, tak nie je jednoduché presne určiť, ktoré pravidlá a tipy majú väčšiu váhu. Avšak mať unikátny obsah a pravidelne aktualizovaný je v súčasnosti považované za jednu z najzákladnejších vecí pre prevádzku úspešného webu.

Názov tohto príspevku som prepisoval snáď 10 krát. Pravdepodobne nie je podľa neho jasné o čo pôjde, tak to skúsim objasniť: Ak chcete validovať formulárové prvky v ASP.NET MVC a na ich design používate Bootstrap, a súčasne na validáciu na klientskej strane používate javascriptovú knižnicu jQuery.Validate tak sa určite dostanete do rovnakej situácie ako ja. jQuery Validate pridáva css triedy s názvom “input-validation-error” a “valid” priamo do input elementu (alebo iných elementov formulára) čo je síce pekné, ale nechce sa mi dizajnovať niečo, čo už bootstrap vyriešil za mňa. Ak chceme použiť korektne knižnicu bootstrap, tak tá to potrebuje mať povedané v inom formáte. (Formát validného/nevalidného prvku nájdete na bootstrap stránke v sekcii Validation states). Čo s tým? ideálne toto:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    }
});

Upraviť metódy highligh a unhighligh uvedeným spôsobom. (aby pridávali triedy has-success a has-error do nadradeného DIV elementu s triedou form-group).

Piata časť zo série Microsoft Dynamics CRM – Javascript API zaoberajúca sa prácou s dialógmi entít – in english as all posts in this category.

These functions are available in every application page that supports scripting. You can use them in form scripts or in ribbon commands. For HTML web resources, they are available when you include the ClientGlobalContext.js.aspx page (full specification you can find on msdn network):

1. Dialogs - There are two types of dialogs: alertDialog and confirmDialog. These are included for use with scripts that will work with Microsoft Dynamics CRM for tablets. CRM for tablets will not allow the use of JavaScript functions that block the flow of code such as window.alert and window.confirm. Use these methods in place of those methods in case you need to display a message to the user. They key difference is that these methods will not block code until a user closes them. They contain a callback function parameter to indicate what code should be executed depending on the user’s response. This method is only available in Update mode.

Xrm.Utility.alertDialog('message', onCloseCallback);

Xrm.Utility.confirmDialog('message', yesCloseCallback, noCloseCallback);

 
2. Entity Form - Opens an entity form for a new or existing entity record using the options you set as parameters.

Xrm.Utility.openEntityForm(name, id, parameters, windowOptions);

Examples:

Xrm.Utility.openEntityForm("account");

Xrm.Utility.openEntityForm("account","A85C0252-DF8B-E111-997C-00155D8A8410");

var parameters = {};
parameters["formid"] = "b053a39a-041a-4356-acef-ddf00182762b";
parameters["name"] = "Test";
parameters["telephone1"] = "(425) 555-1234";
Xrm.Utility.openEntityForm("account", null, parameters);

var windowOptions = {
 openInNewWindow: true
};
Xrm.Utility.openEntityForm("account",null,null,windowOptions);

 
3. Quick Create Form - For Microsoft Dynamics CRM Online 2015 Update 1 or later use this function to open a new quick create form. You can use this function to set default values using attribute mappings or for specific attributes. If the user saves the record, you can capture a reference to the record created.

Xrm.Utility.openQuickCreate(callback,entityLogicalName,createFromEntity,parameters);

Example:

var thisAccount = {
 entityType: "account",
 id: Xrm.Page.data.entity.getId()
};
var callback = function (lookup) {
 console.log("Created new " + lookup.entityType + " named '" + lookup.name + "' with id:" + lookup.id);
}
var setName = { name: "Child account of "+ Xrm.Page.getAttribute("name").getValue()};
Xrm.Utility.openQuickCreate(callback, "account", thisAccount, setName);

4. Web Resource - Opens an HTML web resource.

Xrm.Utility.openWebResource(webResourceName,webResourceData,width, height)

Examples:

Xrm.Utility.openWebResource("new_webResource.htm");
Xrm.Utility.openWebResource("new_webResource.htm", null, 300,300);

var customParameters = encodeURIComponent("first=First Value&second=Second Value&third=Third Value");
Xrm.Utility.openWebResource("new_webResource.htm",customParameters);

Xrm.Utility.openWebResource("new_webResource.htm?typename=account&userlcid=1033");

V 80-tych rokoch vznikla vízia, vtedy len hŕstky ľudí, ktorí začali pracovať s myšlienkou nového prístupu k internetu a tomu, akú funkciu bude v spoločnosti zohrávať v budúcnosti. Táto vízia sa začala označovať - Internet of Things (IoT – “internet vecí”). Medzi prvými, ktorí túto myšlienku začali realizovať, sa často krát spomína firma Coca Cola, ktorá už začiatkom 80-tych rokov ako prvá pripojila svoj automat do internetu. Jednalo sa o priekopnícke riešenie, avšak až do roku 1999 ešte prakticky nikto neuvažoval o Internet of Things ako novom riešení.

Zmena, ktorá nastala v posledných rokoch je skutočne zásadná. Z Internet of Things sa stal nový fenomén, ktorý má od základov zmeniť účel a spôsob využitia internetu ako takého. Zjednodušene sa dá povedať, že IoT sú zariadenia s unikátnym identifikátorom, ktoré sú pripojené do siete bez potreby ľudskej interakcie.

Pre lepšiu predstavu “a thing” je napríklad domáci alarm, inteligentné svietidlo, smart televízor, mobilné zariadenie, senzor…proste všetko, čo je nejakým spôsobom a za konkrétnym účelom pripojené do internetu.

Výskyt IoT už môžeme nájsť skoro v každom odvetví od priemyselného až po moderné zdravotníctvo. Veľkú zásluhu na vzniku IoT má najmä nový protokol IPv6 (“IPng”), ktorý podporuje mnohonásobne viac adries ako starý IPv4.

Všetky tieto novinky a zmeny ovplyvnili samozrejme aj prístup bežného človeka k používaniu internetu. Zmenu potvrdili aj posledné štatistiky, ktoré mali za cieľ preskúmať práve vplyv na spoločenské správanie a zmenu vnímania účelu internetu u ľudí. Ešte v roku 2009 prevažoval u užívateľov klasický stolový počítač. Netrvalo to však dlho a nahradili ich notebooky, tablety a smart telefóny. Zatiaľ čo v minulosti bolo do domáceho smerovača pripojené jedno, maximálne dve zariadenia, dnes je ich už ďaleko viac. Táto kvalitatívna zmena zaťaženia internetu, samozrejme zvýšila nároky na rýchlosť internetu a taktiež domáceho smerovača.

Ale vráťme sa k IoT. Internet vecí prináša ďaleko viac ako si možno bežný užívateľ myslí. Spomeniem len zopár najdôležitejších prínosov, akými sú:

Transormácia biznisu– nový prístup a možnosti vďaka novým technológiám ako sú Big Data alebo veľmi populárne Cloud služby.

Zjednodušenie každodenného ľudského života – dnes sa už bežne stretávame s inteligentnými domácnosťami, smart telefónmi a širokým spektrom ich služieb, a napríklad aj automatickým sledovaním pacienta v nemocniciach. Vďaka IoT je možno dostatočne včas zistiť prichádzajúce nebezpečenstvá, ako sú zemetrasenia, tsunami, lavíny a iné. V neposlednom rade je nutné sa zmieniť o rozvoji takzvaných “smart” miest, ktoré ponúkajú inteligentné služby od parkovania až po upozornenia na dopravné zápchy resp. ich čiastočnú elimináciu.

A čo bezpečnosť týchto zariadení? Momentálne medzi IT odborníkmi panujú určité obavy, akú úroveň bezpečnosti tieto zariadenia majú, resp. budú mať. Vysoké nároky sú samozrejme kladené na výrobcov, ktorých to stavia pred veľkú výzvu, nakoľko musia dostatočne zabezpečiť svoje výrobky proti možnému preniknutiu do týchto zariadení. Do akej miery budú schopní eliminovať možné bezpečnostné riziká z dôvodu stáleho pripojenia ich zariadenia do internetu sa necháme prekvapiť.

Na záver možno zhrnúť, že IoT je nový trend a môžeme ho označiť za malú revolúciu v spôsobe využitia moderných technológií. Úlohou IoT, okrem toho, že ide o novú oblasť pre generovanie zisku veľkých technologických spoločností, je primárne zjednodušenie každodenného života a zaistenie bezpečnosti užívateľov. Pri uvedomení si, ako je všetko prepojené a čo všetko je možné cez internet riadiť a sledovať, sa mnohí ľudia určite neubránia obavám zo straty súkromia a neustáleho “monitorovania” či už vecí okolo nás alebo nás samotných. Samozrejme táto obava bude vždy existovať a netreba na ňu úplne zabúdať, avšak určite by nemala zatieniť celkový skutočne pozitívny prínos IoT pre celú spoločnosť.

Browser Mozilla Firefox Developer Edition v.38 ako developerských prehliadač podporuje najnovšie features zo sveta web technológií. Toto pravidlo platí aj pre fonty v najnovšom formáte .woff2. V našom prípade išlo o fonty od bootstrap-u s názvom glyphicons. Browser nám hlásil error code 404 –  File not found.f

Dané fonty sa samozrejme na webovom servery nachádzali. Problém je, že webový server (v tomto prípade IIS v8.5) nepozná túto koncovku (je pre neho jednoducho nová). Tak mu to musíme povedať pre danú aplikáciu nasledovne:

<system.webServer>
    <staticContent>
    	<mimeMap fileExtension=".woff2" mimeType="application/octet-stream" />
    </staticContent>       
</system.webServer>

Samozrejme túto koncovku vieme pridať aj globálne pre všetky weby na našom servery cez IIS manager, ikonka MIME Types:

Štvrtá časť zo série Microsoft Dynamics CRM – Javascript API zaoberajúca sa prácou so sekciami na formuláry – in english as all posts in this category.  

The CRM javascript API contains methods to manage how it appears as well as accessing the tab that contains the section. Here is most usefull methods (full specification you can find on msdn network) :

1. Section – sections is sub-collection under tab object as describes following code:

var tabObj = Xrm.Page.ui.tabs.get('tabName');

var sectionObj = tabObj.sections.get('sectionName');

2. Label - Use the getLabel and setLabel methods to retrieve or change the label for the section.

sectionObj.getLabel()

sectionObj.setLabel(string)

3. Visibility - Use the getVisible and setVisible methods to check whether the section is visible or hide and show the section.

sectionObj.getVisible()

sectionObj.setVisible(boolean)

Tretia časť zo série Microsoft Dynamics CRM – Javascript API zaoberajúca sa prácou s tabmi na formuláry – of course in english as all posts in this category.

The CRM javascript API for manipulation with the form’s tab is represented by namespace called Xrm.Page.ui.tabs. Tabs is collection which contains all tab objects on the form. Here is most usefull methods for manipulation with tabs (full specification you can find on msdn network) :

1. Tab – Particular tab object you can obtain by following code:

var tabObj = Xrm.Page.ui.tabs.get('tabName');

2. Display state - Use the getDisplayState and setDisplayState methods to determine whether the tab is collapsed or to collapse and expand the tab.

tabObj.getDisplayState()

tabObj.setDisplayState(state)

Valid state argument values are : 'collapsed' and 'expanded'.

3. Label - Use the getLabel and setLabel methods to determine the label for the tab or to hide and show the tab label.

tabObj.getLabel()

tabObj.setLabel(string)

4. Focus - Sets the focus on the tab.

tabObj.setFocus()

5. Visible - Use the getVisible and setVisible methods to determine the tab is visible or to hide and show the tab.

tabObj.getVisible()

tabObj.setVisible(boolean);

6. Sections - The sections collection provides access to sections within the tab. See Collections (client-side reference) for information about methods to access the sections in the collection. About manipulation with sections we will write next post, but here is simple code for obtaining specific section in specific tab:

tabObj.sections.get('sectionName')

Druhá časť zo série Microsoft Dynamics CRM – Javascript API zaoberajúca sa prácou s prvkami formulára. Táto téma by po správnosti mala predchádzať prvej kapitole o práci s kontrolkami, pretože ide o náhľad na metody pracujúce s celkovo formulárom resp. entitou – of course in english as previous post.

The CRM javascript API for manipulation with the entity’s form (ribbon) is represented by namespace called Xrm.Page.ui. It contains properties and methods to retrieve information about the user interface as well as collections for several subcomponents of the form. Here is top 5 usefull methods (full specification you can find on msdn network) :

1. Close - Method to close the form.

Xrm.Page.ui.close()

2. Current Control - Method to get the control object that currently has focus on the form. Web Resource and IFRAME controls are not returned by this method.

Xrm.Page.ui.getCurrentControl()

 
3. Form Type - Method to get the form context for the record.

Xrm.Page.ui.getFormType()

Method returns the number value from following table lists:

 
4. Form Notification - Use setFormNotification to display form level notifications and clearFormNotification to remove notifications.

Xrm.Page.ui.clearFormNotification(messageId)

Use this method to display form level notifications. You can display any number of notifications and they will be displayed until they are removed using clearFormNotification. The height of the notification area is limited so each new message will be added to the top. Users can scroll down to view older messages that have not yet been removed.

Xrm.Page.ui.setFormNotification(message, level, messageId);

Level is string variable with following values :

• ERROR : Notification will use the system error icon.
• WARNING : Notification will use the system warning icon.
• INFO : Notification will use the system info icon.

5. Refresh Ribbon - Method to cause the ribbon to re-evaluate data that controls what is displayed in it.

Xrm.Page.ui.refreshRibbon()

Little tip to the end: Specify constants to your code (in base or common Javascript library) for the Form Types. Example: FormType_Create = 1.

Prvá časť zo série Microsoft Dynamics CRM – Javascript API zaoberajúca sa prácou s kontrolkami resp. vlastnosťami entít – in english for search engines.

The CRM javascript API for manipulation with the controls is represented by namespace called Xrm.Page. The control object provides methods to change the presentation or behavior of a control and identify the corresponding attribute. You can access controls using the following collections: Xrm.Page.ui.controls, but the most usefull shortcut method to access the specific control/attribute is Xrm.Page.getControl(‘attributeName’) method. Under the selected control, you can use folowing methods (we are specifiing only most common/usefull methods; full specification you can find on msdn network):

1. Disabled - Enable or disable the control:

Xrm.Page.getControl('attributeName').setDisabled(bool)

2. Attribute - Returns the particular attribute value – usefull for lookup attribute :

Xrm.Page.getControl('attributeName').getAttribute()

3. Label - Get or change the label for a control using the getLabel and setLabel methods.

Xrm.Page.getControl('attributeName').getLabel()

Xrm.Page.getControl('attributeName').setLabel(label)

 
4. Notification - Use setNotification to display a notification about the control and clearNotification to remove it. Display a message near the control to indicate that data isn’t valid. When this method is used on Microsoft Dynamics CRM for tablets a red "X" icon appears next to the control. Tapping on the icon will display the message.

Xrm.Page.getControl('attributeName').setNotification(message, messageId)

Xrm.Page.getControl('attributeName').clearNotification(messageId)

5. OptionSet - Use the addOption, clearOptions, and removeOption methods to manipulate options available for OptionSet controls.

Xrm.Page.getControl('attributeName').addOption(option, [index])

Option is little object with text and value properties.

Xrm.Page.getControl('attributeName').clearOptions()

Xrm.Page.getControl('attributeName').removeOption(option.value)

6. Refresh - Refreshes the data displayed in a subgrid.

Xrm.Page.getControl('attributeName').refresh()

7. Focus - Sets the focus on the control.

Xrm.Page.getControl('attributeName').setFocus()

8. Time - specify whether a date control should show the time portion of the date.

Xrm.Page.getControl('attributeName').setShowTime(bool)

9. Visible - Determine which controls are visible and show or hide them using the getVisible and setVisible methods.

Xrm.Page.getControl('attributeName').setVisible(bool)

10. IFrame - Use these methods to interact with web resource and IFRAME controls.

Xrm.Page.getControl('subGridName').getData()

Returns the value of the data query string parameter passed to a Silverlight web resource.

Xrm.Page.getControl('subGridName').setData(string)

Sets the value of the data query string parameter passed to a Silverlight web resource.

Xrm.Page.getControl('subGridName').setSrc(string)

Sets the URL to be displayed in an IFRAME or web resource.

Little tip to the end: If you want to manipulate with control in the header of the form, specify prefix “header_” before property name. Example : Xrm.Page.getControl(‘header_attributeName’).