Softkeys

The software key appears at the bottom of the screen, which corresponds to the center, right, and left hardware keys. Each key may or may not appear depending on the availability of features.

Structure

This is a simple structure of a softkey use, see the UI Components section for the style example of the component.

<body id="app">

<!-- Your app's code -->

    <footer class="softkey">
        <div id="softkey-left">Back</div>
        <div id="softkey-center">SELECT</div>
        <div id="softkey-right">Options</div>
    </footer>
</body>

Actions

User actions on the keyboard can lead to a new state of your application. For more understanding see the simple example below, where you can hear the device keyboard actions.

const softkeyCallback = {
    left: function() { console.log('You click on SoftLeft') },
    center: function() { console.log('You click on Enter') },
    right: function() { console.log('You click on SoftRight') }
};
function handleKeyDown(evt) {
    switch (evt.key) {
        case 'SoftLeft':
            // Action case press left key
            softkeyCallback.left();
        break;

        case 'SoftRight':
            // Action case press right key
            softkeyCallback.right();
        break;

        case 'Enter':
            // Action case press center key
            softkeyCallback.center();
        break;
    }
};

document.addEventListener('keydown', handleKeyDown);

In case your application needs to update the softkey, according to a state, view or navigation, this can be done using a function like the following example:

function updateSoftKey(props) {
    const keys = Object.keys(props);

    keys.forEach(function(key) {
        const button = document.getElementById('softkey-' + key);
        button.textContent = props[key].label;
        softkeyCallback[key] = props[key].callback;
    });
}

/* This function is call that way */
updateSoftKey({
    left: {
        label: 'Left text',
        callback: function(){ /* Code */ }
    },
    center: {
        label: 'Center text',
        callback: function(){ /* Code */ }
    },
    right: {
        label: 'Right text',
        callback: function(){ /* Code */ }
    }
});