Visualforce and the Konami Code

If you’re a retro computing fan like me, the Konami Code will be familiar to you. I once used this not-so-secret combination of keypresses to trigger a debug panel on a Visualforce page and now you can to…

Firstly, in your Visualforce page, you’ll need to pull in the Konami Code javascript from Google Code, like so :-

<script type="text/javascript" src="https://cdn.jsdelivr.net.npm/konami-code-js@0.8.1/src/konami-code.min.js"></script>

after which, we can tell it what action to trigger when the code is entered correctly :-

<script type="text/javascript">
konami = new Konami()
konami.code = function()
{
enableDebug();
}
konami.load()
</script>

where enableDebug calls back to the controller apex via an apex actionfunction :-

<apex:actionFunction name="enableDebug" action="{!debugOn}" rerender="debug />

This calls the server-side apex function called debugOn — note how it re-renders the debug panel on completion. This panel is defined as :-

<apex:pageBlock title="Debug" id="debug" rendered="{!isDebug}">
<apex:outputText value="{!debug}" />
</apex:pageBlock>

you can see a couple of things here. Firstly, the panel is only rendered if the value of isDebug is set to true. This value is toggled by the Konami Code. Secondly, it displays the contents of variable debug, which you can set to anything you like. I frequently use it to show the SOQL string I’m querying against

Having set up the VisualForce side of things, we need to implement the server-side callback function in our Apex controller for the page :-

public string debug {get;set;}

public Boolean isDebug {get;set;}

public void debugOn()
{
isDebug = !isDebug;
}

so now at any point in your code, you can store a string value in the debug variable and it will be displayed on the rendered page once you enter the Konami Code (and press Enter)