An Action is a part of an actionStrategy that is rendered on the screen depending on the component and the edit mode of the page. In FEF 0.9.11, buttons have been completely replaced with the idea of actions. Components have an actionSet, as well as the app overall has an actionSet. For example, the actionSet of your overall application can be obtained using

var appActionSet = Facade.Behaviors.DataCoordinator.actionStrategy().actionSet();

A component, like a table, also has an actionSet

var myTable = Facade.Components.Table.forName(...)
var tableActionSet = myTable.dataCoordinator().actionStrategy().actionSet();

You can use the appendActions([array...]) function to append actions to the end of your actionSet or use the following function to completely override an actionSet

tableActionSet.setActions(function(behaviorFn){
    //default actionSet
    var actionSet = behaviorFn.resume();
    //logic
    //return an array of actions
    return actionSet;
});

Access a specific action using the .action() function

var action = myActionSet.action('<name of action>');

To apply a function to all actions of an actionSet, use defaultAction

var action = myActionSet.defaultAction();

Let's say we have a transition that we want to show a confirmation popover on button click before the transition executes - you can use the defineCapture to accomplish this. The following code snippet will show a popover with the set message once the action is clicked on the screen - the user will be able to cancel the action or continue, which will execute the action.

//Add confirmation prompt before action executes on server
action.defineCapture({
    captureConfig : {
        message : "Are you sure you want to execute this action?"
    }
});

To apply a callback function after an action executes successfully, use the setOnSuccess function.

action.setOnSuccess(function(bf, args){
    //access name of action that just executed
    var successfulAction = args.action;
});

Actions have the following functions:

Data can be accessed programmatically through the DataRegistry or by retrieving the page's primary data.

//Get Page's Primary Data - returns a Data Prototype object
var primaryData = Facade.PageRegistry.getPrimaryData();
//Get data from DataRegistry - returns a Data Prototype object
var myData = Facade.DataRegistry.get('someData');

Data Prototype objects provide some convenience methods, as listed in the below table. It is bad practice to modify raw data within FEF for a couple of reasons; the most important being that FEF cannot track whether the data is dirty or not if it is modified in its raw form. Keep data within its Data Prototype to avoid frusteration; i.e., access a field of your data by using .get() as seen in code snippet above instead of attempting to modify the raw data of the prototype.

Get/Set Field of Data

var data = Facade.PageRegistry.getPrimaryData();
var startDate = data.get('startDate');

var data = Facade.PageRegistry.getPrimaryData();
data.set('comments', 'Some random comments');

Get/Set Root Pointer

var data = Facade.PageRegistry.getPrimaryData();
//Get root pointer field
var pointer = data.getPointer('<pointerField>');
//get root pointer ID
pointer.getTargetId()
//get root pointer label
pointer.getLabel()
//get root pointer type
pointer.getTargetType();
//set root pointer label
pointer.setLabel('<label>')
//set root pointer Id
pointer.setTargetId('<id>');

Party Data Functions

var data = Facade.PageRegistry.getPrimaryData();
//Get party field
var buyer = data.get('myBuyer');
//Get Buyer Org Id
buyer.getOrganizationId();
//Get Buyer name
buyer.getName();
//Get Party role
buyer.getRole();
//Get org address
buyer.getAddress1();

Create/Register Data

//Register a client design in your design registry
var clientDesign = Facade.DesignRegistry.register(
                new Facade.Prototypes.Design(undefined, { designType : 'myDataType' } );
//Add a text field and a picklist field to your design
clientDesign.addField('textField').setFunctionalType(Facade.Constants.FunctionalType.TEXT);
clientDesign.addField('picklist').setFunctionalType(Facade.Constants.FunctionalType.PICKLIST);

//Create data
var newData = new Facade.Prototypes.Data({
    picklist : 'picklistValue' ,
    textField : 'Default value'
    }, { type : 'myDataType' });
//Register your data
Facade.DataRegistry.register('newData' , newData);

Create a New Object Instance

//Define the data of your new object
var payload = { ... };
    
var newObject = new Facade.Prototypes.Data(payload, 
                                            { type : '$SurveyS1' , isNew : true });

//Save the object - if you have the isNew flag set, it will create a new object
Facade.Resolver.persist(newObject).then(function(obj){
    //Get the unique identifier(UID) of your newly created object
    var id = obj.getId();
});

A DataList is an array of Data prototype objects. Lists in your design, such as line item lists or lists of embedded objects, are represented in FEF as DataLists.

Iterate over a Data List

var myDataList = Facade.DataRegistry.get('myObjectList');
var removeIndx;                        
myDataList.forEach(function(item,indx){
    if(item == 'end'){
        removeIndx = indx;
        //halt iteration
        return true;
    }
});
myDataList.remove(removeIndx);

Creating Data Lists

//Create datalist prototype
var dataList = new Facade.Prototypes.DataList( [] , { type : 'myDataListType' });
//Add data to your dataList
dataList.push(new Facade.Prototypes.Data( {
    dataField : 'some value' ,
    anotherField : 'another value'
});
//register your datalist
Facade.DataRegistry.register('myDataList' , dataList);

Filter a Query's Result Set

//Search for a type of object
Facade.Builders.Query(OBJECT_TYPE)
    .param('oql' ,"status='active'")
    .onSuccess(function(results){
        var filteredList = results.transformList({
            filter : function(item){
                //remove items with priority of 0
                if(item.get('priority') == 0 )
                    return false;
                else
                    return true;
            }
        })
        Facade.DataRegistry.register('filteredList' , filteredList );
    })
    .execute({ sessionManaged : true });

<core-table data="filteredList">
    ...
<core-table>

ResolverData is a type of data that has a resolver() function that resolves data from the server. ResolverData inherits all the functions of a Data and DataList prototypes. The methods below are most commonly used with ResolverData

When your FEF application needs to fetch data from the server, you can use ResolverData to do so. ResolverData signals to the UI that data is expected and once it is processed and returned by the server it is displayed.

Here, we have an example of a table that displays data that is fetched asynchronously from the server. It is best practice to add your data's type. The resolver field function returns a promise.

Facade.Components.Table.forName('dataDisplayingResolverData').setData(
    new Facade.Prototypes.ResolverData( undefined , {
        type : '$ObjectTypeQ1',
        isList : true,
        resolver : function(){
            return Facade.Resolver.query('$ObjectTypeQ1', {
                    params : {
                        oql : 'status="active"'
                    }
                }
            )
        }
    })
)

<core-table name="dataDisplayingResolverData">
    <core-field field="fieldOfData"></core-field>
    ...
</core-table>

Let's say we want to resolve our data on click of a button in our application and we also want to indicate to the user the status of our resolverData. Do something like the following. Set up your data as resolverData in the DataRegistry and resolve the data every click of the button. To show the user the status of the data, set the label of a core-text component to your data's getResolveStatus function

Facade.Behaviors.App.onLoad(function(){
    var resolverData = new Facade.Prototypes.ResolverData(undefined, {
        type : 'User',
        isList : true,
        resolver : function(){
            //return a promise - this is your query that will resolve into your data
            return Facade.Resolver.query(...);
        }
    });
    //Register data in your DataRegistry
    Facade.DataRegistry.register('loadingData' , resolverData)
});
//Set your text field to return the getResolveStatus of your data
Facade.FunctionRegistry.register('myText', function(){
    var dataToCheck = Facade.DataRegistry.get('loadingData');
    if(dataToCheck){
        return dataToCheck.getResolveStatus();
    }
    return 'No Data';
})
Facade.Components.Button.forName('myBtn1').setOnClick(function(b){
    var resolverData = Facade.DataRegistry.get('loadingData');
    resolverData.resolve({ resolveOnServer : true });
});

....
<core-text label-fn="myText"></core-text>
...
<core-button name="myBtn1" label="Resolve My Data"></core-button>
...             

Using Resolver Data's Correlation Key

Another useful function of the ResolverData is the correlationKey property. The correlationKey specifies when ResolverData resolves; that is, when the correlationKey changes, the ResolverData's resolver function will be triggered. The correlationKey property is a function where a string is returned. This can be helpful when you want to send queries that depend on other data in the application. When the user changes the data, you can use the correlationKey pattern to re-query against the server.

Here is an example of how to use a correlation key. In the following scenario, we send a query depending on a field on our primary data. When the field value changes, the resolver function of the resolverData would re query against the server

Facade.DataRegistry.register('correlatedActions' , new Facade.Prototypes.ResolverData(undefined , {
        resolver : function(ro){
                var val = Facade.PageRegistry.getPrimaryData().get('fieldX');
                return Facade.Builders.Query(IDENTIFIER)
                    .registerAs('identifier' + val )
                    .param("oql","value contains '" + val + "'")
                    .execute({ retryOnDisconnect : true , sessionManaged : true });
        },
        correlationKey : function(){
            return Facade.PageRegistry.getPrimaryData().get('fieldX');
        }
    }));

A Design prototype describes how a specific kind of data is modeled in a FEF application. Design Prototypes are to be registered in the DesignRegistry. Any object that is loaded into your FEF application will have a design registered in the DesignRegistry implicitly. You can access a design of an object with the global identifier $ObjectType by its identifier as a key in the DesignRegistry, like so:

var design = Facade.DesignRegistry.get('$ObjectType');

Design prototypes have the following methods that can be accessed programmatically within a FEF application.

design.addField('textField')
    .setFunctionalType(Facade.Constants.FunctionalType.TEXT)

Add a Virtual Field

projectDesign.addVirtualField("targetDuration",function(){
		var startDate = this.get("startDate")
		var endDate = this.get("targetEndDate")
		if (startDate && endDate) {
			return (Date.parse(endDate)
               - Date.parse(startDate)) / 1000 / 60 / 60 / 24
		}
		return undefined
	},function(value){
		if (isNaN(value)) {
			return
		}
		var startDate = this.get("startDate")
		if (startDate) {
			var endTime = Date.parse(startDate) + value * 24 * 60 * 60 * 1000
			var endDate = new Date(endTime)
			this.set("targetEndDate",endDate.getFullYear() + "/" +
   (endDate.getMonth() + 1 < 10 ? "0" : "") + (endDate.getMonth() + 1)
   + "/" + (endDate.getDate() < 10 ? "0" : "") + endDate.getDate())
		}
}).setFunctionalType(Facade.Constants.FunctionalType.INTEGER)

Field Prototypes make up a design. Here, we iterate over the fields of a design.

var design = Facade.DesignRegistry.get('$ObjectType');
var fields = design.getFields();
for(var i = 0; i < fields.length; i++){
    var field = fields[i];
    ...
}

The following methods can be used for Field prototypes.

Party data is wrapped in a Party Prototype within a FEF application.

The following methods are available on Party Prototypes.

Picklist's within a FEF application are of type Picklist prototype and need to be registered in the Picklist Registry. Here is an example of a client side picklist that is initialized, then registered in the Picklist Registry, and then displayed on the front end as a dropdown on a field.

Facade.PicklistRegistry.register("sectionPicklist",new Facade.Prototypes.Picklist(
        [ {value: "rowType1", label: "Section 1"},
          {value: "rowType2", label: "Section 2"},
          {value: "rowType3", label: "Section 3"}]));

//Tell a field to render as a picklist
Facade.Components.Field.forName('pickListField')
    .setValueType(Facade.Constants.FieldComponentType.PICKLIST);

//Add your picklist to a field
Facade.Components.Field.forName('pickListField').setPickType('sectionPicklist');

Now, on your template html - just display a field. The field will render as a picklist because that's what its value type is and will use the picklist that we just registered in the Picklist Registry.

<core-form>
    ...
    <core-field field="..." name="pickListField"></core-field
    ...
</core-form>

Access a pointer within a data root using the getPointer function

//Access root pointer field myPointer of your primary data root
Facade.Behaviors.App.onLoad(function(){
    var primaryData = Facade.PageRegistry.getPrimaryData();
    var myPointerProto = primaryData.getPointer('myPointer');
});

The following convenience functions are available on a pointer prototype