Fusion App Studio – A Collection of Code Snips

February 16, 2019

Contents

Angular Statements

ng-class

Add a class called “displayresult” to a tag if the search result’s foo field is not empty.

<search:result ng-class="{'displayresult': result.fields.foo.val[0] !== undefined}">
	<div> ... stuff ... </div>
</search:result>

Add a class called “clear-border” to layout block if a “more” button click condition in the controller has been met.

<layout:block ng-class="{'clear-border': moreon}">
	<div> ... stuff ... </div>
</layout:block>

ng-if

Show image if the result’s hyperlink is not empty.

<img ng-if="(result.fields.hyperlink.val[0] !== undefined)">
	ng-src="{{result|field:'image'|actual}}?v={{$root.version}}"
	title="{{result|field:'title'|display}}" />

Show image if search result’s image field is not empty and environment field contains the string “Tree”

<span ng-if="(result.fields.image.val[0] === undefined && result.fields.environment.val[0].indexOf('Tree') > -1)">
	<img class="static" ng-src="{{$root.contextPath}}assets/icons/tree.png?v={{$root.version}}"/>
</span>

Show block if a whole bunch of conditions are met

<layout:block ng-if="(result.fields.image.val[0] !== undefined && result.fields.tab.val[0].indexOf('Apps') < 0
	|| (result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('Hyperspace') > -1)
	|| (result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('InfoView') > -1)
	|| (result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('Insights') > -1)
	|| (result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('Logic') > -1)
	|| (result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('Vantage') > -1)
	) 
	&& !((result.fields.tab.val[0].indexOf('Reports') > -1 && result.fields.environment.val[0].indexOf('Tableau') > -1))
	&& result.fields._lw_data_source_s.val[0].indexOf('Galleries') === -1"
	>
	<div> ... stuff ... </div>
</layout:block>

Comments Form

Add icon to POST button

Add a styling or class to the <social:comment-form> tag that refers to the form like myCommentForm or myButton.

commentform button - Fusion App Studio - A Collection of Code Snips

<social:comment-form 
	target="result.id"
	styling="myCommentForm" 
	class="myButton"
></social:comment-form>

Then in CSS, specify the button’s background, width and height as needed.

.tk-stl-myCommentForm {

    .tk-stl-comment-form {
        margin: 0;

        .tk-stl-button {
                background: lighten(#1571bc, 10%);
                margin: 0.427rem 0 0 0;
                padding: 0 0.8em;
                height: 1.757rem;
                font-weight: bold;
                text-indent: 1.5rem;    
                line-height: 2.15;
                width: 4.5rem;
        }
        .tk-stl-button::after {
                content: url(../../assets/search/icon_post_14.svg);
                text-indent: -0.2rem;
                display: block;
                margin-top: -1.4rem;
                width: 1.125rem;
        }
    }
}

Change text of POST button

Add a class to the <social:comment-form> tag that collapses the original text line and adds the new text.

.myButton {
	.tk-stl-button.tk-stl-button-small {
		text-indent: -9999px;
		line-height: 0;
	}
	.tk-stl-button.tk-stl-button-small::after {
		content: "New button text";
		text-indent: 0;
		display: block;
		line-height: initial;
	}
}

Facets / Filters

Facet naming

Option 1 – add the facet name aliases in the markup through the facet-name parameter in a <search:facet> tag.

<search:facet-list 
    platform="platform" 
    query="query" 
    response="response" 
    styling="facet-list facet-list-wrappedheader"
    show-empty="false"
    >

    <search:facet
        facet-name="topics_hier=Topics" 
        show="5" 
        show-more="15"
        >
        <facet:hierarchical 
            facet-name="topics_hier" 
            platform="p_hierarchical" 
            query="query"
            select="multiselect"
            >                                                
        </facet:hierarchical>
    </search:facet>

    <search:facet 
        facet-name="environment=Environment"
        collapsible="true" 
        max-characters="40"
        select="multiselect"
        show="5" 
        show-more="15"
        ></search:facet>
</search:facet-list>

Option 2 – add the facet name aliases in the markup through the facet-name parameter in a <search:facet-list> tag.

<search:facet-list 
    platform="platform" 
    query="query" 
    response="response" 
    styling="facet-list facet-list-wrappedheader"
    show-empty="false"
    facet-name="environment=Environment, product_type=Product, entity=Business Entity">

   <search:facet  
        collapsible="true" 
        max-characters="40"
        select="multiselect"
        show="5" 
        show-more="15"
        ></search:facet>
</search:facet-list>

Option 3: add facet name aliases by injecting the TranslationService library into a controller along with a line for each facet field you want to give an alias to. Here’s an example using the high-level controller and function in /scripts/controllers/main.js:

angular.module('twigkitLightApp')
        .controller('MainCtrl', ['$rootScope', '$scope', '$stateParams', '$location', 'ModalService', '$twigkit', '$window', '$timeout', 'TranslationService',
            function ($rootScope, $scope, $stateParams, $location, ModalService, $twigkit, $window, $timeout, TranslationService) {

                // Transform Facet Name Aliases
                TranslationService.put('topics_hier', 'Topics');
                TranslationService.put('training_audience', 'Training Audience');
}]);

Continue to use the original field name in the markup and the translation will appear when the page is rendered, as the facet names no longer require the ad-hoc aliasing in the markup.

<search:facet-list 
    platform="platform" 
    query="query" 
    response="response" 
    styling="facet-list facet-list-wrappedheader"
    show-empty="false"
    >
    
    <search:facet 
        facet-name="topics_hier">
        <facet:hierarchical 
            facet-name="topics_hier" 
            platform="p_hierarchical" 
            query="query"
            select="multiselect"
        ></facet:hierarchical>
    </search:facet>

    <search:facet  
        facet-name="environment"
        collapsible="true" 
        max-characters="40"
        select="multiselect"
        show="5" 
        show-more="99"
        ></search:facet>
</search:facet-list>

Images

Images missing from app deployed to server

Sometimes image code and tags don’t work when an app is deployed to the company web server, even though everything works fine when viewed in the local desktop development environment running Jetty. Here are some of the basics to check when this happens. In main.js, set the context path to '/'. This will interpret to “https://servername:8080/appname.” The image service eventually needs to reach this path.

// Set the context path for assets and pages
$rootScope.contextPath = $twigkit.getContextPath('/');

Then in the <media"image> tag on the HTML page, set the image-service-url parameter value the context path in main.js. The image-service-url parameter in the following example points to both the context path and a custom image service in /src/main/resources/conf/services/images/tableau which calls a Tableau server API to retrieve thumbnails:

<!-- has hyperlink and image from Tableau -->
<media:image 
	ng-if="(result.fields.image.val[0] !== undefined && result.fields._lw_data_source_s.val[0].indexOf('Tableau') > -1)"
	src="{{tableauImageUrl(result, $root.version) | trusted}}"
	image-service-url="{{$root.contextPath}}twigkit/services/images/tableau/"
	use-headers="true"
></media:image>

Set the context path in Tomcat. If the images DO display when deployed as root.war to Tomcat, then check Reverse Proxy settings.

add `<Context path=”” docBase=”myhiway” debug=”0″ reloadable=”true”></Context>` to server.xml?

Modal Dialog

Two-color dialog header

This two-color modal header solution differentiates between a static prefix phrase like Gallery Item and a mutable string like Value Oriented Architecture.

modalheader1 1024x409 - Fusion App Studio - A Collection of Code Snips

In the <widget:modal> tag on the HTML page/view, enter the desired full text heading as plain text or variable to the title attribute, along with a class name through the modal-classes attribute.

<widget:modal id="viewdetails{{result.id}}" title="Value Oriented Architecture" modal-classes="psjh-gallery-modal">
    <layout:include file="views/modals/viewdetails.html" value="{{result.id}}"></layout:include>
</widget:modal>

Add this modal class name to LESS/SASS with a reference to the framework’s default header style which contains a :before pseudo-element that manages the desired phrase prefix. Adjust colors as desired.

.psjh-gallery-modal .tk-stl-modal-header {
    color: #000 !important;

    :before {
        content:"Gallery Item - ";
        color: #f1933c;
    }
}

The result should be a two-color modal dialog heading that came from a single attribute.

Modal timeout

When a modal widget built on the App Studio ModalService service works on only on a few desktops, a failure in event timing may be the cause.

<widget:modal style="z-index: 1000;" id="TimeoutModal">
	<div id="timeoutContainer">
	...
	</div>
</widget:modal>

Try wrapping calls from the ModalService.show function in custom.js with a timeout function.

// Timeout Warning - show modal dialog
$scope.$on('IdleStart', function () {
	$scope.showModal('TimeoutModal');
});
// Timeout Warning - set modal services (note: needs timeout to work in all browsers)
$scope.showModal = function (id) {
	$timeout(function () {
		ModalService.show(id);
	}, 0);
};

Search Results

Currency fields

Add the currency field to Solr’s managed-schema.xml as either a string or an integer.

<field indexed="true" multiValued="false" name="cost_str" required="false" stored="true" type="string"/>
<field indexed="true" multiValued="false" name="cost_int" required="false" stored="true" type="ints"/>

Then in App Studio, add either field to a <search:field> tag with the number-format parameter.

<!-- Products, Parts, Accessories, and Supplies -->
<layout:block styling="psjh-result-table" 
	ng-if="((result.fields._lw_data_source_s.val[0].indexOf('Documents')) === 0)">
	<search:field label="Product ID:" name="id" styling="meta label-inline"></search:field>
	<search:field label="CostA:" name="cost_str" number-format="$#,###.##" styling="meta label-inline"></search:field>
	<search:field label="CostB:" name="cost_int" number-format="$#,###.##" styling="meta label-inline"></search:field>
</layout:block>

Leave a Reply

Your email address will not be published. Required fields are marked *