Positioning button to bottom right corner

Questions
1

 We have a requirement to position button to bottom right corner rather than default position of top right  corner.  Any Idea?

2

I assume you’re using the table or field editory component.

  1. Disable the buttons on the table or field editor component.
  2. Add a Page Title component below table or field editor component.
  3. Choose the same model.
  4. Add the necessary button. Likely the default Save/Close button.

3

Hi Pat,

That’s a great idea. I am using wizard component and the button is running multiple actions, actually one action, ‘run javascript snippet’.

4

Lots of people are using this stragety to move wizard buttons to the bottom of the page. 

https://community.skuid.com/t/go-to-next-wizard-step-from-mass-action


5

I assume the “Navigate to Step” action can be copied via XML as well.

6

Not sure what you mean by that Pat.  The XML node for Navigate to step buttons is only located in the title area of the wizard, so you can’t just move that XML block to a page title.   But you can make a snippet that does that work for you. 

7

I mean this.
1. Create the wizard button.
2. Also create another button in a page title component at the bottom of the page.
3. Copy XML from wizard button into page title component button.
4. Remove the wizard button.

8

Thanks Rob & Pat,

To position the button at the bottom right corner of the wizard

1.  I added a page title component after the wizard component
2. Removed the button from the wizard component
3. Added the component to the Page title component of type ‘Run Multiple Actions’
4. Set margin-right property to 8px (default is 4px) to adjust the alignment
5. Added an action ‘Run a Javascript Snippent’ 
6. Called the same snippet that was called previously from wizard button
7. Got an error saying  something like ’ can’t read navigate of undefined’ while javascript was trying to navigate to next step.

8. Gave the wizard component an id 'wizardId,
9. Get the wizard component using
     var wiz = skuid.component.getById(‘wizardId’);
10. wiz.navigate(‘step2’)

9

Thanks for Documenting Jnanendra.  Glad you got it working.