Our First Keyword

[CSWinnall]

Hi @cortexrd

Just thought I'd let you know that we have just made our very first app specific keyword. _vmxw "View Max Width". This accepts a number as a parameter. This is the function to make it work:

//Special app-specific keywords.  Note that all keywords must start by an underscore "_".
function processViewKeywords(view, keywords, data) {
    if (keywords._vmxw) { // _vmxw = View Max Width
        $('#' + view.key).css('max-width', keywords._vmxw + 'px');
    }
}

Thank you Norm this was really easy to do because of KTL.

Craig

[cortexrd]

Congratulations to you both, Craig and Amanda!!!

FYI, when you copy/paste code here, I found out that it was better to paste first, select the code, THEN click the Code <> icon.
Otherwise, it's hard to get a nice layout as expected.

I took the liberty to reformat your code above.

Cheers,
Normand

[jbk68]

Good Morning Craig and Amanda, I see a few months ago you created a new keyword (_vmxw).

Do you mind explaining what this keyword does? I'm trying to find a solution that when our app is used on different sized monitors that it stretches to max width (which it currently does) but when doing so, the columns look so out of place (unportioned). Trying to find a solution to lock down the columns. I've tried a couple solutions posted on Knack forum with unsatisfactory results.

Wasn't sure if this keyword was a fix for this or not. Hoping to add my first keyword soon, any and all help on how to add one would be appreciated.

Thanks guys... JON

[CSWinnall]

Hi Jon We created this keyword to set a views max width. This was before Norm came up with his _style keyword. However we still use this: ``_vmxw=1000`` As a shorthand for this: ``_style=[max-width: 1000px]`` We keep using it because it means it's easily identifiable amongst all our _style keywords on a view and it's a few less characters to type as we use this a lot, on nearly all views and we can adjust them individually. Do not use the code I posted originally , it won't work, as it is very out of date. We have since updated it to accept ktlRoles andultiple instances. I will post the latest code here on Monday. I have started to look at your code but haven't tried it yet I'll let you know about it in Knack forum on Monday. Craig

[CSWinnall]

Hi Jon

There are 2 bits of code you need to add to the KTL if they are not there already

ktl.views.setCfg({
        processViewKeywords: processViewKeywords,
    });

 //Special app-specific keywords.  Note that all keywords must start by an underscore "_".
function processViewKeywords(view, keywords, data) {
    var fieldsWithKwObj = ktl.views.getAllFieldsWithKeywordsInView(view.key); //for custom field keywords
    if (!$.isEmptyObject(fieldsWithKwObj)) {
        var fieldsWithKwAr = Object.keys(fieldsWithKwObj);
        // console.log('fieldsWithKwAr: ' + fieldsWithKwAr);
        var foundKwObj = {};
        for (var i = 0; i < fieldsWithKwAr.length; i++) {
            fieldId = fieldsWithKwAr[i];
            ktl.fields.getFieldKeywords(fieldId, foundKwObj);
            if (!$.isEmptyObject(foundKwObj) && foundKwObj[fieldId]) {  
                    //Field keywords go here Params available = viewId, fieldId, paramGroups, data . . . 
                    if (foundKwObj[fieldId]._kw && foundKwObj[fieldId]._kw[0].params.length) {
                        //All looks valid, let's do something with it.
                        const paramGroups = foundKwObj[fieldId]._kw[0].params;
                        //customfieldFunction goes here
                    }
            } //END Field keywords 
        }
    }// if you do not need custom field keywords you can remove the code above until the comment "for custom field keywords"
    if (keywords && !$.isEmptyObject(keywords)) {
        keywords._vmxw && setViewMaxWidth(view, keywords); // _vmxw = View Max Width i.e _vmxw=1200
        //Enter any other custom view keywords here
    } //END ERROR CHECKING
} // END PROCESS KEYWORDS

With this code added you can add custom Field Keywords & custom View keywords.

The setViewMaxWidth function is below:

function setViewMaxWidth(view, keywords) {
    const kw = '_vmxw';
    const viewId = view.key;
    if (!viewId || !keywords[kw]) return;
     //allow multiple instances
    const kwList = ktl.core.getKeywordsByType(viewId, kw);
	kwList.forEach(kwInstance => { execKw(kwInstance); })

    function execKw(kwInstance) {
        // check for roles
        const options = kwInstance.options;
        if (!ktl.core.hasRoleAccess(options)) return;
		
        $('#' + view.key).css('max-width', kwInstance.params[0][0] + 'px');
    }
}

The setViewMaxWidth will allow you to have different widths of view for different user roles and allow you to use it as many times in the view as needed e.g.

_vmxw=[1000], [ktlRoles, Developer]
_vmxw=[800], [ktlRoles, User]

Hope this makes sense any questions and I'll be happy to help.

Craig

[jbk68]

Thanks Craig.

Will give it a try this evening... JON