Bridgeline Digital Logo
Menu

Widgets

When building out a content editor page any HTML form element should be valid for collecting attributes from the content author.  You can also create your own widgets or use libraries of other widgets.  OrchestraCMS comes with a library of predefined widgets that can be used within the content editor pages.

Page Selector

The OrchestraCMS page selector provides content authors a way to select a page/file/external URL to link to.  The value is stored as a cms Link object.  Methods are provided for returning each of the properties of the link.

Parameters for Page Selector

  • input_field : String (optional), The ID of the element to populate on user selection.  The element's value will be set to the serialized representation of the selected item, retrievable with the getSerializedLink method.
  • input_id : String (optional), The ID to apply to the page element the will hold the page selector controls (i.e. the Clear button and the selected item label).
  • selected : String (optional), JSON serialized representation of the selected link. Accepts a String (JSON serialized one or CSV) or an Object representing the link properties.
  • selected_name : String (optional), Name of the selected item.
  • showCategories : Boolean (optional), Whether to enable the link selector dialog to support selecting taxonomy categories to be passed with the link.  Defaults to false.
  • changeCB : Function (optional), A callback function called on clear and selection.

Methods

  • getSerializedLink : Returns String, Returns the CSV represenation of the link properties.
    • Response: Internal,null,CurrentWindow,Home,,,,
  • getSerializedLinkJSON: Returns String, Returns the JSON serialized represenation of the link properties.
    • Response: '{"type":"Internal","id":null,"url":"Home","targetType":"CurrentWindow","width":"","height":"","name":"Home","window":"","tags":""}'
  • getSelected: Returns Object, Returns the selected link properties as an object.
    • Response: {fileType:"", height:"", id: null, name: "Home", originId: undefined, pageName: "", parentId: "", tags: "taxonomy/tag", targetType: "CurrentWindow", type: "Internal", url: "Home", width: "", window: ""}
  • getSelectedTags: Returns String, Returns the taxonomy tags assigned to the link when showCategories is enabled.

cms.Link Properties

  • csv : The CSV list of properties of the link.
    • Sample: Internal,a0ui0000009LmjEAAS,PopupWindow,Home,,,, 
  • target: Set when an author selects Open in a new window when creating the link.
    • Sample: _blank
  • targetPage: The relative URL of the linked item.
    • Sample: /Home
  • javascript: The javascript value to use when open in a new window is selected by the author creating the link.
    • Sample: window.open("/Home&ocmsLang=en_US","","location=1,status=1,scrollbars=1,height=,width=")
  • linkType: The value is based on the selection made by the author when creating a link for A page in this CMS (Internal), A file in this CMS (Media), A file or page on another site (External) 
    • Sample: Internal
  • link: The serailized string of the link properties.
    • Sample: {DisplayName=http://www.google.com, PopupHeight=, PopupWidth=, Tags=, TargetId=, TargetSEOName=, TargetType=NewWindow, TargetUrl=http://www.google.com, Type=External, WindowName=, ...}
  • linkName: The value to display for the link. Either the external URL, the name of the page in OrchestraCMS or the name of the file in the media library.
    • Sample: Home
  • linkId: The relative URL of the file in the media library.
    • Sample: /servlet/servlet.FileDownload?file=00P0H00000yDjZzUAK
  • targetType: The value selected by the author for Open In... One of either CurrentWindow, NewWindow or PopupWindow.
    • Sample: NewWindow
  • linkJSON: The JSON string of the link properties.
    • Sample:  {"window":"","width":"","url":"","type":"Media","targetType":"PopupWindow","tags":"","name":"LFN111165.pdf","id":"/servlet/servlet.FileDownload?file=00P0H00000yDjZzUAK","height":""}

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){
ce.content_editor('registerSaveFunction', function() {
    return [
    {
    "name":"MyLinkAttr", 
    "value":$('#MyLinkField').page_selector_input('getSerializedLink'), 
    "type":"Link"
    }
    ];
});
 /* Initilize the page Selector */
        var selectedLinkJSON =  {!IF(OR(MyLinkAttr.LinkJSON == null,MyLinkAttr.LinkJSON == ''), 'null',MyLinkAttr.LinkJSON)};
        $('#MyLinkField').page_selector_input({
            selected: selectedLinkJSON,
            selected_name: '{!JSENCODE(MyLinkAttr.LinkName)}',
            showCategories: 'true'
        });        
});

</script>
<div style="padding-top:20px;padding-bottom:20px;">
    <label class="ocmsLabel"><b>Select Link</b></label>
    <div id="MyLinkField" /> 
</div>

When handling the saved attribute of a page selector in an Apex class it is declared as a cms.Link instead of a String.  

public cms.Link MyLinkAttr{
        get{
            return this.getPropertyLink('MyLinkAttr');
        }
    }

When rendering a link the properties of the link should be considered when rendering the markup.  For example:

html += '<a href="';
        if(this.MyLinkAttr.targetPage != null)
            html += MyLinkAttr.targetPage;
            html += '"';
        if(this.MyLinkAttr.target != null && this.MyLinkAttr.target != '')
            html += ' target="'+this.MyLinkAttr.target+'"';
        if(this.MyLinkAttr.javascript != null && this.MyLinkAttr.javascript != '')
            html += ' onclick=\''+this.MyLinkAttr.javascript+'\'';
    html += '>';
    html += this.MyLinkAttr.getLinkName() +'</a>';

Tag Selector

The OrchestraCMS Tag Selector allows an editor to select tag paths from any published taxonomies.  The tags are then either applied to the content being edited or can be saved as attributes of the content.  When saving as attributes of the content tag paths should be saved as a list.  The example provided saves the selected tag paths as attributes of the content.

Parameters for Tag Selector

  • input_field : String (optional), The ID of the element to populate on user selection.  
  • contentId: String,, If not using the onSelectedTags property either this property or the pageId property must be used. This is the recordId of the content to apply the tags to.  
  • pageId : String,, If not using the onSelectedTags property either this property or the contentId property must be used. This is the recordId of the page to apply the tags to.  
  • taxonomyId: String, Either this property or the availabletaxonomies property must be used.  This is the contentId of a specific taxonomy to provide the editor with if limiting the choice to a single taxonomy.
  • taxonomyName : String (optional), Label for the Select button and dialog title.
  • onSelect : function, function that executes on tag selection, passing the widget instance. Either this property or the onSelectedTags property must be used.  If setting this property tags are added to the content item.
  • onSelectedTags : function, function that executes on tag selection, passing the selected tags. Either this property or the onSelect property must be used.  If setting this property tags are not added to the content item.
  • showVisibleOnly : Boolean (optional), Show all tags in the path. Default is true and would return /top/middle/bottom. If set to false would return /top, /top/middle and /top/middle/bottom.
  • availableTaxonomies : String (optional), Either this property or the taxonomyId property must be used.  This is commma seperated list of the contentIds of specific taxonomies to provide the editor with if limiting the choice to certain taxonomies.  If this property is used and left blank the editor will be able to select from all published taxonomies.

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){
ce.content_editor('registerSaveFunction', function() {
    return [
    {
    "name":"selectedTaxPath", 
    "value":$('#TargetTaxonomy_selector_input').val(), 
    "type":"Text"
    }
    ];   
});
/* Initialize the Tag Selector */ 
$('#TargetTaxonomy').taxonomySelectorInput({
    input_field: 'TargetTaxonomy_selector_input',
    dialog_id: 'TargetTaxonomy_selector_dialog',
    availableTaxonomies: '',
    onSelectedTags: function(aListOfTags){
        var stringOfTags = '';
        var isFirst = true;
        aListOfTags.forEach(function(tagObject) {
            stringOfTags += (isFirst ? '' : ',') + tagObject.path;
            isFirst = false;
        });
        $('#TargetTaxonomy_selector_input').val(stringOfTags);
    }  
});     
});
</script>
<div>
    <div id="TargetTaxonomy"/><br/>
    <input type="text" id="TargetTaxonomy_selector_input" class="ocmsTextInputLrg" readonly="readonly" value="{!selectedTaxPath}"/>
</div>   

If using the onSelectedTags to save the selected taxonomy paths as attributes of the content the following example would be used in the Apex class to retrieve the attribute.

public List<String> selectedTaxPath{
        get {       
            return (List<String>) this.getPropertyList('selectedTaxPath');
        }
    }       

Image Selector

The OrchestraCMS image selector provides content authors a way to select a file from the OrchestraCMS media library.  The value stored is the relative URL to the file (Salesforce) or the full URL to the file (Amazon, Google).  

Parameters for Image Selector

  • field_id : String (optional), The ID of the element to populate on user selection.  The element's value will be set to the URL or record Id of the selected file depending on the value of the mode property.
  • mode : String (optional), Sets the indicator returned for the selected file.  Has a value of either url or id, url is the default.
  • type: String (optional), Specifies the type of file, either Image or Flash.  
  • url: String, The URL of the selected file retrieved from the controller.  
  • folderParams: Object, Object properties are folderPath and autoCreate. folderPath restricts the dialog context to the specified folder in the media library, for instance if this content template should only store/get files from a specific location.  If autoCreate is set to true then the folder will be created if it does not exist. autoCreate will only create the last folder in the path, the other folders must already exist.
  • selectOnly : Boolean (optional), If set to true the user will be unable to upload files to the media library via the dialog.
  • uploadOnly : Boolean (optional), If set to true the user will be unable to select files from the media library via the dialog.
  • singleFileuploadOnly : Boolean (optional), If set to true the user will only be able to upload a single file via the dialog at a time. This property can only be used with uploadOnly set to true.
  • hideTree : Boolean (optional), If set to true the user will not see the tree portion of the library dialog and will not be able to set the folder context.
  • height : String (optional), Sets the initial height of the thumbnail placeholder below the Select button.
  • width : String (optional), Sets the initial width of the thumbnail placeholder below the Select button.
  • onSelect : function (optional), Function run when user selects a file.  The widget instance is passed as a parameter.
  • onClear : function (optional), Function run when user clears the field.  The widget instance is passed as a parameter.

Methods

  • getSelected : Returns String, Returns the relative URL to the selected image if using Salesforce media library and full URL if using Google or Amazon media library.
    • Response: '/servlet/servlet.FileDownload?file=00po000001R4AjEAK'

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){
ce.content_editor('registerSaveFunction', function() {
    return [
    {
    "name":"MyImageAttr", 
    "value":$('#MyImageField').image_selector_input('getSelected'), 
    "type":"Text"
    }
    ];
});
 /* Initilize the Image Selector */
        
        $('#MyImageField').image_selector_input({
            url:    '{!MyImageAttr}',
            selectOnly: true,
            folderParams: {'folderPath': 'mediaLibraryName/folderName', 'autoCreate': true},
            hideTree: true
        });        
});

</script>
<div style="padding-top:20px;padding-bottom:20px;">
    <label class="ocmsLabel"><b>Select Image</b></label>
    <div id="MyImageField" /> 
</div>

When retrieving an image attribute in an Apex class you would use a code example like the followling:

public String ImageURL{
        get{
            return(this.getProperty('MyImageAttr'));
        }
    }

Image URLs may need some additional processing in the event that the site defined in Salesforce has a prefix.  For example http://www.example.com/prefix/Home.  The prefix is not part of the stored attribute. This means to get the relative URL for the image something like the following would need to be done to check if an image was selected and if it is stored in Salesforce, instead of Google or Amazon, and if the site has a prefix to be added to the URL.

public static String getSiteURLForMedia (String MyImageAttr) {
        if (String.isNotBlank(MyImageAttr)) {
            String sitePrefix = Site.getPathPrefix();
            if (sitePrefix != null && MyImageAttr.startsWith('/servlet')) {
                MyImageAttr = sitePrefix + MyImageAttr;
            }
        } else {
            MyImageAttr = '';
        }

        return MyImageAttr;
    }    

DateTime Selector

The DateTime selector allows a content author to select a date/time combination or the value now.  This value is then stored as a string (i.e. 2017-5-27 03:00:00).  

Parameters for DateTime Selector

  • passThruId : String (optional), The ID of the element to populate on user selection.  The element's value will be set to the selected datetime.
  • type: String (optional), Whether to show fields for date or datetime. datetime is the default.  
  • date: String (optional), Prepopulates the date field with a date in the format mm-dd-yy.
  • time : String (optional), Prepopulates the time field with a time in the format h:mm.
  • ampm : String (optional), Prepopulates the am/pm selector at the end of the time field.
  • timezone : String (optional), Timezone to display to the user on the selector.  No matter which timezone is set here the timezone on the user's Salesforce record will be displayed.
  • value : String (optional), Sets the value of the widget.  If this is used date, time and ampm are ignored.  This is used to set the value from previously saved value.
  • mode : String (optional), Set the default of the selector to now or future_date.   now can only be used if the show_now_option is set to true.
  • show_now_option : Boolean (optional), If true now is available to select. If false user is limited to a future date. The default is false.

Methods

  • getValue : Returns String, Returns the datetime as a string or the value now.
    • Response: '2019-9-23 02:30:00'
  • getValueGmt : Returns String, Returns the datetime as a string in GMT. Returns null if the selector was initialized with with a type of date.
    • Response: '2019-09-23 06:30:00'
  • getDateTimeObject: Returns Object, Returns the selected date as an object.
    • Response: '{mode: 'future_date', viewDate: '09/23/2019', viewTime: '2:30', viewAmPm: 'AM'}'
  • getTime: Returns Integer, Returns the number of milliseconds passed from January1, 1970 to selected time.  Returns null if no value selected.
    • Response: 1569220200000
  • validate: Returns Boolean, Check if the selected value is a valid date.
    • Response: 1
  • setDateTime: Returns Boolean, Set the datetime value. Returns 1 if valid, 0 if invalid.
    • Sample: $('#datetime_field').datetime_selector('setDateTime', '2019/09/23 21:00:00');
    • Response: 1

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){
ce.content_editor('registerSaveFunction', function() {

    return [
        {
        "name":"DateTimeAttr", 
        "value":$('#datetime_field').datetime_selector('getValue'), 
        "type":"Text"
        }
    ];
    });
    
    $('#datetime_field').datetime_selector({
            passThruId: 'datetime_field',
            type: 'datetime',
            showLabel: true,
            mode: 'now',
            show_now_option: true,
            value: '{!DateTimeAttr}',                                
        });
});
</script>
<div style="padding-top:20px;padding-bottom:20px;">
    <label class="ocmsLabel">DateTime</label>
    <div id="datetime_field"/>
</div>

When retrieving the attribute in an Apex class you would use a sample like the one below:

 public String DateTimeAttr{
        get{
            return(this.getProperty('DateTimeAttr'));
        }
    }

Content Type/Template Selectors

The content type and content template selectors allow content authors to select multiple content templates within a content item.  The selected content type is stored as the Salesforce record Id of the Content Type record.  The selected content templates are stored as a comma delimted string of content template names.

Parameters for Content Type Selector

  • selectedContentTypes : String  or Object, List of Content Type record Ids as a semicolon seperated list or as a JSON array.
  • multiselect: Boolean (optional), Allow the selection of mutliple types. Default is true.  

Parameters for Content Template Selector

  • selectedContentTypes : String  or Object, List of Content Type record Ids as a semicolon seperated list or as a JSON array.
  • selectedContentTemplates: String  or Object, List of Content Template names as a semicolon seperated list or as a JSON array.
  • contentTypeSelector: String, Element Id of the content type selector widget. Id must be prefaced with #.
  • multiselect: Boolean (optional), Allow the selection of mutliple types. Default is true.  

Methods for Content Type and Template Selector

  • getSelected : Returns String, Returns semicolon seperated list of Ids for the content types and names for the content templates.
    • Response: 'a09o0000004ffqhAAA;a09o0000004ffqoAAA'
    • Response: 'SalesforceChatterContentFeed;SalesforceChatterPeopleDetail'

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){

ce.content_editor('registerSaveFunction', function() {

    return [
        {
        "name":"ContentTemplateAttr", 
        "value": $('#contentTemplateField').content_template_selector('getSelected'), 
        "type":"Text", 
        "lang":""
        },
        {
        "name":"ContentTypeAttr", 
        "value": $('#contentTypeField').content_type_selector('getSelected'), 
        "type":"Text", 
        "lang":""
        }
    ];
});
$('#contentTypeField').content_type_selector({
            selectedContentTypes:'{!ContentTypeAttr}',
            multiselect:true
}); 
$('#contentTemplateField').content_template_selector({
            selectedContentTypes:'{!ContentTypeAttr}',
            selectedContentTemplates: '{!ContentTemplateAttr}',
            contentTypeSelector:'#contentTypeField',
            multiselect:true
});
});
</script>

<div style="padding-top:20px;padding-bottom:20px;">
    <div id="contentTypeField" />
</div>
<div style="padding-top:20px;padding-bottom:20px;">
    <div id="contentTemplateField" />
</div>

When retrieving the attributes from an Apex class the code would look like the following example:

public String ContentTypeAttr{
        get{
            return(this.getProperty('ContentTypeAttr'));
        }
    }
    
    public String ContentTemplateAttr{
        get{
            return(this.getProperty('ContentTemplateAttr'));
        }
    }

Content Selector

The content selector provides authors a way to select other content within the content editor page of content they are authoring.  The selected values are stored as a comma seperated string of Salesforce record Ids for the content and a comma seperated string of content template names for each selected content item.  The values in the two strings will be in the same order. 

Parameters for Content Selector

  • id_list : Array, List of content origin (version 1) Ids.
  • layouts : Array, List of content template names.
  • showLayouts: Boolean (optional), Show the content template name for each selected content item. Default is true.  
  • listableOnly: Boolean (optional), Only show content in the selector that has the Listable checkbox selected on the Content Layout record. Default is true.

Methods for Content Selector

  • getSelectedContentIds : Returns String, Returns comma seperated list of record origin Ids (version 1) for the selected content.
    • Response: 'a09o0000004ffqhAAA;a09o0000004ffqoAAA'
  • getSelectedLayouts : Returns String, Returns comma seperated list of content template names in matching order to the content Ids.
    • Response: 'SalesforceChatterContentFeed;SalesforceChatterPeopleDetail'

 

<script type="text/javascript" language="javascript">
$(document).ready(function(){

ce.content_editor('registerSaveFunction', function() {

    return [
        {
        "name":"ContentIdsAttr", 
        "value": $('#contentSelectorField').content_selector('getSelectedContentIds'), 
        "type":"Text", 
        "lang":""
        },
        {
        "name":"ContentLayoutsAttr", 
        "value": $('#contentSelectorField').content_selector('getSelectedLayouts'), 
        "type":"Text", 
        "lang":""
        }
    ];
});
      
});

</script>
<style type = "text/css" >
.content_table {
    border : 1px solid #CCCCCC ;
    padding : 0px ;
    margin : 0px ;
    border‐collapse : collapse ;
    border‐spacing : 0px ;
    width : 540px ;
}
.content_table input {
    margin : 0px !important ;
    padding : 0px !important ;
}
.content_table tr {
    border : 1px solid #CCCCCC ;
}
.content_table th {
    border : 1px solid #CCCCCC ;
    padding : 5px ;
    background‐color : #DDE8A5 ;
}
.content_table td {
    border : 1px solid #CCCCCC ;
    padding : 5px !important ;
    background‐color : #fff ;
    float : none !important ;
    height : 40px ;
}
</style>
<div style="font-size: 18px; font-family: arial;">Content Selector</div>
<div style="padding-top:20px;padding-bottom:20px;">
    <div id="contentSelectorField"/>
    <script>
    /* The widget must be created inline and not in $(document).ready()
otherwise it will wait for the document ready event and it will not load */
    $('#contentSelectorField').content_selector({
        id_list:'{!ContentIdsAttr}',
        layouts:'{!ContentLayoutsAttr}',
        listableOnly: false,
        showLayouts: true                                       
    });
    </script>
</div>

When retrieving the attributes from an Apex class the code would look like the following example:

public String ContentIdsAttr{
        get{
            return(this.getProperty('ContentIdsAttr'));
        }
    }
    
    public String ContentLayoutsAttr{
        get{
            return(this.getProperty('ContentLayoutsAttr'));
        }
    }
Copyright © 2019 Stantive Technologies Group Inc.